I'm building an adaptive/responsive website.
Regarding this recent change to the HTML5BP:
"mobile/iOS css revisions"
I've started using:
<meta name="viewport" content="width=device-width">
... and I have this in my CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
When initial-scale=1 was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1 and JS fix for viewport scale bug).
To summarize, when in landscape mode, this zooms the page:
<meta name="viewport" content="width=device-width">
... and this does not:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: You can see this zooming effect in action when viewing the HTML5BP website on an iPad/iPhone.
My questions:
Is this becoming the new standard (i.e. zoom when in landscape mode)?
I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?
#robertc: Thanks! That's very helpful.
I actually like not having the initial-scale=1; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be forced to add initial-scale=1 just to please everyone (because not zooming, and seeing the layout change, is what they're used to seeing).
I just noticed the HTML5BP index.html on github, and the website, was using <meta name="viewport" content="width=device-width">; to me, that's good enough reason to ditch initial-scale=1, but I get raised eyebrows when I try to explain these things to the "non-geeks". :D
It's not a new standard, it's how it's always worked AFAIK. If you set the width to a fixed number of pixels, then rotating portrait to landscape just changes the scale, because the number of virtual pixels remains constant. I'm guessing that adding initial-scale=1 is blocking the scaling as you switch between - that is the scaling factor of your page doesn't change as the device is rotated. What does the page look like if you load it initially in landscape instead of portrait?
I would suggest that if you want the behaviour you get when you specify initial-scale=1, then specify initial-scale=1. HTML5 BoilerPlate is something you're supposed to modify to suit your own requirements.
Apple [somewhat] clearly describes the viewport behavior here.
Chiefly, device-width and device-height in iOS devices refer to the screen dimensions in portrait mode. If you set the viewport width to device-width, it is the same as setting it to a constant value. Therefore, when the physical width of the screen changes with an aspect change, the browser stretches the constant size you entered to the width of the screen in landscape mode. This behavior is neither wrong nor right, it just is.
Apple suggests width=device-width for apps tailored to the platform, so it is certainly the "Apple" way of doing it:
If you are designing a web application specifically for iOS, then the
recommended size for your webpages is the size of the visible area on
iOS. Apple recommends that you set the width to device-width so that
the scale is 1.0 in portrait orientation and the viewport is not
resized when the user changes to landscape orientation.
[ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]
Personally, I prefer the initial-scale=1.0 with no absolute device-width setting approach, since it makes the viewport always fill the device screen without stretching. Apple considers this valid markup as well:
Figure 3-14 shows the same webpage when the initial scale is set to
1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to device-width
in portrait orientation and device-height in landscape orientation.
To add a little update: This is still in draft form, but it's definitely something to look into. Also has a prefixed version for IE 10 support. By using CSS instead of HTML it clears up a lot of the confusion you're speaking on by applying the initial-scale:1; to zoom:1; and giving min/max options for width, height, & zoom which furter increases the range of adjustment should it be required.
extend-to-zoom to the rescue! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)
<meta name="viewport" content="initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
#-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
where as <meta name="viewport" content="width:device-width,initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: device-width; /* = 100vw */
}
#-ms-viewport{
width: device-width;
zoom: 1.0;
}
Note: width:extend-to-zoom 100%; is equal to width:device-width;
http://dev.w3.org/csswg/css-device-adapt/
I found Mozilla's viewport explanation the most detailed and helpful. Here's a excerpt:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out
did you try this?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
Please see the simple snippet. I am using chrome 58.
While i turned on device mode, iphone 6 (375*667px), computed width
shows:490px.
While i turn off device mode, and narrow down the viewport width to
exactly 375px, the computed width shows 187px.
why is that kind of difference?
div {
height:100px;
background-color:green;
width:50vw;
}
<div></div>
This isn't specific to Chrome, but rather because screen resolution is not equal to browser window size. The CSS unit vw stands for viewport width, and is relative to the viewport. This is your screen minus the reserved space of the browser chrome. Keeping in mind how many different devices and browsers there are, this reserved space can differ greatly. For more information on this, see Screen Resolution != Browser-Window.
To work around this, you can set the viewport width in the <meta> to be measured off of the device-width:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
It's also recommended to use media queries to target specific breakpoints. If you want to get fancy, you can even target specific devices. To help with this, WebSiteDimensions has a nice chart illustrating the various different 'safe areas' for different devices.
Hope this helps! :)
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
When I view my website example page on on my iPad there isn't enough width really so its all a bit cramped up because many columns (especially when you expand the sections). So I twist my iPad to view the page in landscape
and instead of making use of the extra space it just makes the font larger, how can I get it to consider the extra width it now has.
Just add
html{ -webkit-text-size-adjust: 100%; }
This was already discussed here;
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
Use the viewport meta tag to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone or iPod touch-specific web application, then set the width to the width of the device. Refer to Supported Meta Tags for a detailed description of the viewport meta tag.
Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.
For example, to set the viewport width to the width of the device, add this to your HTML file:
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to your HTML file:
<meta name=“viewport” content="initial-scale=1.0">
To set the initial scale and to turn off user scaling, add this to your HTML file:
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
Create responsive web interface, is not merely the thrill of seeing the display changes when the browser is in big-minimize its resolution. But also accommodate the display to be able to perform comfortably in a variety of devices, browsers and resolution.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
html { -webkit-text-size-adjust: 100%; }
}
These are proper media queries to limit this particular css to only iPad in portrait and landscape. Doing it this way shouldn't have any effect on your desktop view.
I have a fixed-width site (980px) where we have been asked to remove the right hand sidebar on smaller devices. (Devices where the screen size is less than 768px, say.)
This means that effectively, we're running two fixed-width sites from the same codebase.
We're using the following meta tag in the site:
<meta name="viewport" content="width=device-width,initial-scale=1">
The problem is that on larger tablets, we're seeing the full site (as we should), but zoomed in. (Because the tablet is considering full width to be - say - 768px and is zooming accordingly.)
I cannot set width to be a fixed size:
<meta name="viewport" content="width=980,initial-scale=1">
...because smaller devices will then zoom out too far.
Is there any workaround that will fix the zoom-level properly for all devices?
(n.b. I am aware that the basic idea is wrong here.)
OK, so I've managed to get this up and running.
Start by setting width=device-width to ensure that the correct "responsive" version loads. Give the metatag an ID so that we can easily grab it later.
<meta id="viewport" name="viewport" content="width=device-width"/>
Then, we want to check the screen size so that we can force the width and zoom to right size:
(function($){
$(function(){
if (window.matchMedia !== undefined) {
var mq = window.matchMedia("(max-width: 767px)");
if (mq.matches) {
$('#viewport').attr('content', 'width=767');
}else{
$('#viewport').attr('content', 'width=980');
}
}
});
})(jQuery);
I noticed that setting initial-scale in any way broke zoom.
Note that I'm using window.matchMedia here, which although not fully supported, is fine for my purposes. If you need to support a greater percentage of users, you might consider using Modernizr.mq instead.
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!