Heho people,
what again are the drawbacks of using the device-width-media-queries?
The background of my quest is:
--> a websiteB I control and which has to be responsive
--> in an iframe of 100% width and height
--> on a webpageA with possibly NO viewport-meta-tag
Therefore on mobile, the mobile browser renders webpageA without a viewport-meta-tag, i.e. it will be big. So the iframe getting big values for it's own responsiveness and my webpageBs normal width-media-query (which is recommended so many times) is not triggering, because it needs small values . . .
Nonetheless the device-width-media-query is getting the right values, so why not using it?
A device's width has nothing to do with a device's viewport which is what the browser will be using. Usually in mobile devices the viewport is actually bigger then shrunken down into the device's width.
Targeting anything for a media query other than the actual wrapping body (i.e. the viewport) of the document is just asking for issue in design later.
As to the browser rendering without a viewport I think you may have your terminology off and may I ask what you are building with an iframe? Unless app software specific frames are generally discouraged from structural mark up usage.
Related
I was under the impression, that the units vh and vw deal with mobile browser zooming in, but apparently that's not the case and I think I am beginning to understand why. Zooming in does not change the viewport at all, but merely shows the user only a part of the viewport, despite the name viewport. Basically there is a difference between what you can see and the viewport. I don't know if distinguishing those two really makes sense, but that's how it seems to be.
The question is: How else do I "react" in my stylesheet to zoom changes?
For example, I have some html element with a width and it fits on the screen of a mobile phone. Now the user zooms in (doing that two finger gesture, moving the fingers away from each other). The size of the element should stay the same relative to what the user sees, but text should get bigger, because it might be the reason why the user zooms in. Maybe they couldn't read it before or want a link to be bigger, so that they can click more easily on it.
How would I do such a thing?
I've read about #viewport stuff, but it's not really supported yet and also poses the question, when to use which viewport size, how to make it as fluent as when you use vh and vw on a destop browser? Simple limiting "up to so and so much px of width" won't do. Defining a mathematical function for how much the element changes its size relative to what one can see and how much the text size changes would be great, but is probably not possible to have.
On mobile devices, the text-size-adjust property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.
As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.
Its highly experimental though
I am constructing a responsive website, and have designed it to look correct for desktop view.
I am currently tweaking it now for responsive breakpoints/media queries.
Here's the problem that I would like guidance on:
From my understanding, I've seen people only use width for their break points. In which case I did the same thing and make it look good on all the width break points.
However, I happened to be testing using the google chrome developer tool and started selecting specific devices (iphone 5, iphone 6, iphone 6 plus, ipad, etc.)
And noticed something alarming, which was that the elements was getting pushed off the screen vertically at the top and bottom because each of these devices not only have different widths, but HEIGHTS as well.
So the perfectionist in my is thinking about setting a media query for both height and width for every major device, but I realize that this work, although can be done, might not be the most efficient, and I have not seen other tutorials do this.
My specific question is: if there is a more efficient way to developing a responsive site without having elements go off the screen vertically.
Added information: I have a div that contains an img, then a h1 below it, then a bootstrap row with col-sm-6
The img width is in px (I experimented with vh/vw and %, but that seemed to make it more difficult to control when it scaled)
You can not set media query for device height, You can set height only,
And do not depend only in google chrome developer tool because sometimes it will not response in proper way, so you have to test in actual device for batter view.
I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.
However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.
I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?
Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.
Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.
#media screen and (max-width: 74em){...}
#media screen and (max-width: 47em){...}
I have tried px measurements as well.
Let me know if any more information is required. Thank you for your help.
I was oscillating between fixing the viewport to the device width and fixing it to an absolute width, as well as testing between browsers. Setting the meta viewport tag to device-width works on some browsers, but not all, and it appears mobile has historically poor support for fixed headers. I ultimately opted to simply disable the header on certain devices; I think any other solution would demand using javascript and probably yield a pretty poor performance on mobile devices.
As well, setting the viewport to device-width may compress the body of an HTML page set to 100% height to less than the device height, which is a problem if you're working with a footer. I ultimately solved this by padding out the body with extra space depending on the aspect ratio.
After dealing with this problem I'd recommend avoiding fixed items on mobile devices, unless you specifically target a userAgent. In general mobile devices are too dynamic in size, and using fixed headers seem to be a bit more trouble then they're worth.
We are developing an intranet backoffice. We've been investigating about safe area, and real viewport size of browsers in different OS.
Since it's internal software, we can "force" users to use browser and resolution we want. We would like to use 1280x1024 resolution in screens, and Chrome (or Firefox) as default browser.
We've checked with browser window maximized that the viewport size (in Chrome and Firefox) is 1263 pixels width. But we don't want to force so much, I mean, we think in 1240 as maximum width of web design.
Now, playing with CSS Grid generator software, I've found this config: 1240px = 12 columns of 85px each one plus 20px gutter.
What do you think about this ? Is it a good idea flexible enough for a backoffice ?
Any suggestions about this development ?
Thank you in advance
P.D. By the way, we were thinking about using BlueTrip CSS grid modified to 1240px ...
I don't see any point why you should limit your intranet app for certain browsers. In fact it may cause you more problems (browsers updates may break some layouts and elements since you are not forced to do proper cross-browser testing, monitor upgrades with different screen resolution). So, if it is flexible enough? No. Is the 12 columns grid enough? May be, depends on use. I would prefer to use fluid grid, responsible web design and media queries.
px? em? pt? seems like with varying device sizes and densities it's getting to be time to use something absolute like pts. Can anyone point me to a good, recent write-up of what to use when?
(I'm specifically targeting webkit-based mobile devices as my primary platform, though the site needs to work on large monitors, as well. I'm fine ignoring IE and older browsers for the most part.)
Check out this and that from Luke Wroblewski. Googling his name will find more.
As you say with high density phones you should avoid px but also pt that originally was for printing. As you setup your site to comply with most browsers, mobile or not, set your body font-size using percentage (historically better support I say without source) and then use em through your document. This allow your users to set their preferred font-size in their (mobile phones) browser settings and let you keep your relations between your different font-sizes.
As a web developer, I stick to pixels because this is already a standard for all digital display devices. Most mobile phones now come in screens based on pixels, and phones are able to resize to fit your content.
You simply have to make sure that you minimize the amount of content on each page for fast loading and rendering.
I think that you are best designing multiple CSS style sheets for browser window sizes,
Aside from that the best method in my mind is percentages - that way the content is always relative to the screen it is being viewed on. And then use em for font-sizes which is similar in the way it works to the way percentage works for layout sizes.