I am trying to make sure I properly understand the way the Meta viewport tag works when setting width=device-width.
Would it be a correct statement that when working on a mobile device with
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> usage of pixel units is (or should be) treated as if they are given on a grid that is 320 pixel wide? i.e. an element with width:160px would take up (160/320 = 50%) of the screen?
This behavior does not seem to work when running on a desktop browser,
so assuming that I want to get the same design on mobile and desktop, should/can I use either percentages or the vw/vh units?
The first thing to realize is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something to width: 160px in CSS relates to CSS pixels, which have very little to do with the actual pixels of the device.
Mobile browsers (on reasonably modern smartphones) create a "fake" viewport, that is emulating a desktop-width browser size, that is also zoomed out so that it fits on the screen. The measurements for this fake viewport is usually somewhere around 800-1000 CSS pixels wide (iPhones, for example, use 980px). This is to make sure that non-optimized sites still display OK on phones, as you can zoom in on specific parts etc.
When you use the meta viewport tag with width=device-width, you are telling the device that your site is adapted for viewing on any viewport size, and that you don't want the "fake desktop" measurement.
Instead, the browser should set the number of CSS pixels that fit on the screen to what is considered the "ideal" number of pixels for that device. On old iPhones, that was actually 320 pixels. On iOS devices with a retina screen, the CSS-pixel-to-device-pixel ratio is different, so the screen is 640px wide, but the ideal number of CSS pixels is still only 320. On other smartphones, the measurement is different - usually anything from 300 - 500 pixels on a smartphone.
If you want your layout to adapt to the number of CSS pixels, you are probably better off leaving the specific pixel measurements out of it and use percentages. 50% of the viewport will always be 50% of the viewport no matter how many CSS pixels you have to play with.
More often than not, there is absolutely no need for these harmful declarations:
maximum-scale=1, user-scalable=no
My eyes are not very good and so often I find fonts used on web pages uncomfortably tiny. And what can be more annoying, if the site prevents me from zooming to be able to read it?
If you still think otherwise - please read carefully this article: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
Quotes from there (emphasis mine):
Declaring maximum scale
Setting a maximum scale means setting a maximum zoom. On a website where the access to the information is the top priority (most, if not all, websites), setting a maximum-scale=1 won’t allow the user to zoom. This might seem unimportant if you have a responsive website, but there are lots of cases when the user might need to zoom: small body font (at least, for the user’s needs), checking some details in a photograph, etc. Don’t trigger an accessibility issue just for aesthetic reasons.
User-scalable=no
This parameter removes the ability to zoom in or zoom out, and it’s even worse than maximum-scale. If there’s a really special reason to use it (e.g., you are coding a web app and need to avoid zooming in form inputs), try adding and removing it with JavaScript, just for the action you want to fix. Anyway, remember that smartphone users are used to zoom in and out any website, so having to zoom out after filling a form might be a default behavior and you don’t probably have to fix it.
Combo breaker
Now picture the combo-breaker: a non responsive website (fixed layout, about 960px width) with a viewport tag like
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
Congratulations, your website zoomed to the first 300px or 400px of the top left corner, the user can’t zoom out and the only way to access the information is by patiently viewing the website in pieces of 300px width. A whole experience screwed up by an extra tag.
Related
I've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
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
EDIT: Because I maybe wasn't clear enough. I'd like to point out I'm NOT searching for "how to use viewport". I'd like to know how that actually works on background. How is the actual number of the viewport width computed on mobile device etc.
For example my smartphone has the smaller size 1080px but it returns 414 instead. Actually not just the viewport, also simple $(window).width() returns only 414. Please read the rest I wrote before those two paragraphs. Thank you.
I also changed the title to somewhat more explicit, but you still need the read the rest. Thank you.
I'm getting familiar with using the viewport, yet I still can't see how it actually works on background. If you read viewport dimension on smartphone with HD resolution, browser returns you viewport width way under 1920 or 1080 which is the actual phone's screen resolution.
1) How does the browser come up with those numbers? Is it detecting mobile device at general or mobile device is giving the browser actual screen size (real-life screen size)?
2) How does the browser differs between smartphone and much bigger tablet, if they both have the same resolution?
3) Media queries and other stuff relies on certain breakpoints. Those are actually hard written values in every responsive design. Usually something like 480 and 768px. Is that something I can also rely to be constant? No matter how far will the screen resolution go up on smartphones in the future? I mean like 4k on 5" screen.
4) How does PC screen fits to all this? Browser doesn't detect mobile device? or machine won't give it actual screen size? How does it know it just should use the pixels as pixels (minus scrollbars etc.)?
#Saix,
Have you searched out what you actually want? You will get your answer on first search.
Here, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages or a common Header file under the <head> tag.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
I am designing a web page for Opera Mobile. It has a little zoom icon on the left right corner. When I visit www.opera.com, this icon becomes invisible and zoom level becomes fixed. For any other web page it appears and I can zoom in and out of the page. I want the same fixed zoom behavior in my page too. It is probably some css property. Do you know what properties should I set and on which objects? Or do you think there would be another way to accomplish this.
Thank you.
It looks like they are using the "viewport" meta tag to specify the width of the page. This probably is set to smaller than mobile Opera's available scren width, so the Zoom button is not needed.
Here is the tag as it is used on the mobile version of Opera.com:
<meta name="viewport" content="width=320" />
To keep your page from scaling, I would set the tag to be as follows:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />
Although keeping the user from scaling would not be my first choice UI-wise.
The opera developer site describes the support of this tag:
The viewport meta tag
The viewport meta tag contains information about the preferred settings of the viewport for viewing the HTML page it is contained within. Just like any other meta tag, viewport sits inside the head element of your HTML page—browsers that support it use the information to display the web page more appropriately for that device, while browsers that don’t simply ignore it. It was originally created by Apple to improve the way web pages display on the iPhone, but we have added support for it in Opera Mobile 9.5 because it is a good way of optimizing display information for different mobile devices. The tag looks like so:
<meta name = "viewport" content = "width = device-width, height = device-height" />
All it contains is the meta attribute, which specifies that this is a viewport meta tag, and the content attribute, which contains a comma-delimited list of the different values you want to specify for this page. The different pieces of information you can specify are as follows:
width and height: These specify the width and height that the viewport should be set at for this web page. The values can be set in pixels, or you can use the device-width and device-height values, respectively, to specify that the width and height should be set as the full width and height of the device’s screen. The default value of width is 980 pixels, and it can be set from 200 to 10,000 pixels. The default value of height is calculated from the width of the device and its aspect ratio, and it can be set from 223 to 10,000 pixels.
initial-scale: This sets the initial scale of the web page when it is first displayed. By default it just fills up the whole screen of the device, unless you deliberately set it otherwise.
minimum-scale and maximum-scale: These specify the minimum and maximum amounts that the user is allowed to zoom in and out, their values being multipliers. minimum-scale has a default value of 0.25, and its value can range from just above zero to 10.0. maximum-scale’s value can also range from just above zero to 10.0.
user-scalable: Specifies whether the user is allowed to zoom in and out—possible values are yes and no, with yes being the default.
Opera Mobile 9.5 fully supports the viewport meta tag, with a few notable specific behaviours. It ignores user-scalable, minimum-scale and maximum-scale because we believe that zooming is a browser feature that should always be available for users. Also, as the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied. This means that viewport-enabled pages will look exactly the same whether “Mobile view” is switched on or off.
It is recommended that width and height values are not hardcoded for a single device, such as the iPhone; instead you should set their values to device-width and device-height, so that your pages also work nicely on VGA, QVGA, WVGA and WQVGA devices.