I'm working on a project where we are looking to deploy a responsive mobile version of a website for a client - in this scenario the existing 'desktop' site has two breakpoints:
>= 980px
>= 1200px
On devices with screens smaller than 980px the 'small desktop' site is just scaled to fit the browser so users are able to tap to zoom etc and effectively navigate the full desktop site.
We now want to implement a version of the site for small screens (<480px), however the problem I have encountered is that by changing the meta viewport tag to accommodate a breakpoint for a 1:1 layout on small screens I've lost the ability for users with screens between 481px and 979px to use a scaled version of the desktop site.
Previously I was using the meta tag:
<meta name="viewport" content="width=980">
But as I understand it to have small screen devices scale the layout correctly I need to adjust that to read:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What I really need of course is a mixture of both! - Any ideas?
Had a similar challenge with http://blakelondon.co.uk - native scaling on devices larger than mobile, than responsive on mobile.
Your issue is the reverse of mine but I think the same approach would work.
The solution uses JavaScript to rewrite the meta-viewport to a fixed width to force native device scaling. Caveat - it comes with the very minor drawback of a layout reflow in one of the contexts.
First set the meta-viewport as normal:
<meta name=“viewport” content=“width=device-width” />
Then, sprinkle in some JavaScript to rewrite this value to a fixed width to force native scaling on smaller devices (pick screen.width to suit):
if (screen.width <= 640) {
viewport = document.querySelector(“meta[name=viewport]”);
viewport.setAttribute(‘content’, ‘width=980’);
}
Hope that helps!
P.S. My colleague #cole007 also broached this issue, with slightly different code:
http://cole007.net/blog/136/responsiveish-viewport-hack
Related
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
My site uses bootstrap 3 to accommodate devices of varying screen sizes. I use bootstrap's hidden-xs class to hide my page's unnecessary background image on small devices allowing them to focus on the important input components without having to zoom in. This works fine if you resize the browser window or adjust your monitors resolution. It also works great on low-res phones like the iPhone.
However, since bootstrap uses screen pixel size, this does not work on android phones with high resolutions. The result is, the phone user has to zoom in or work hard to select the appropriate inputs as they appear small on the phone's physically small screen.
Is there an easy fix for this so that users with high-res phones don't get the same look as the desktop users?
Thanks!
You can use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> section of your HTML document, to scale the document based on the screen width of the device you are using.
Check MDN for more information about the viewport meta tag and its usage.
An explanation of layout viewport and visual viewport can be found here.
I have read here and here that one should use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
if one wants to optimize a webpage for mobile devices.
I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:
width=device-width
The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.
initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.
Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?
To give a more concrete example: Consider the following webpage
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:
the CSS layout, especially percentual widths, are calculated relative
to the layout viewport
I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?
Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.
Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.
Also from the same document:
Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.
Mozilla goes on to say:
If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I'm not a fan of this technique; I think the cure is worse than the disease in most cases.
It is because it is rotating page rendered in portrait mode. You will have to redraw page. Here is similar question .
I think that the problem you have is confusing the device-width and screen/browser resolution.
as in the example you post:
These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)
they are retina display and the difference is only in bigger pixel rendering from the iphone, so the browser will rendere full-screen even with 320px device-width in landscape. the big problem with iphone is that this difference don't change between portrait/landscape.
and
You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.
where the device pixel (The screen) is different from visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
there device-width will have always 100% screen width.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
there you should test if there are no changes on iphone or the DIV will extend out/gap of the screen in landscape
i think this source is correct only using media-query with device-width (not visible on iphone), because if you use normal media query you can see that the effective pixel-ratio of the browser rendering changes from 320px to 480px
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
I'm a relative newcomer to CSS, and I recently figured out how to use #media to query for a device or browser size, and help make the site responsive, but I've been having a lot of trouble with the <meta name="viewport"> tag (as I see a lot of other people have too).
The shift to the mobile view triggered by #media only screen and (max-device-width: 680px) is working just fine, but so far, on both iPhone and Android phones that I've tested it on, the initial view is partially zoomed in. For the mobile view version, I have the body, the container div, and the child elements sized at 540px or less and then used the following tag in the head of the html doc:
<meta name="viewport" content="initial-scale=1, width=device-width" />
But like I said, when I visit the site on a mobile device (like my Razr M, which has a screen resolution width of 540px), the viewing area shows up zoomed in, so that what I see is about 2/3rds of the full 540px of content, starting from the left. But then, if I manually zoom out, it stops at the correct size and everything looks good. The test site is up at http://thereisnomountain.com/indextest.html, and it relies on one stylesheet at http://thereisnomountain.com/style/tinmtest.css. Help would be appreciated!
I have developed my website width of 1020px.
However when I try and access the site from an iPad it crops the website out from the right side.
How can I make it zoom out and show the entire site?
I have tried different meta viewport tags but it doesn’t help.
iPad 3's (and other 2x pixel density devices) misbehave with viewports. Have you tried setting the viewport to 1020px?
Something like this should work:
<meta name="viewport" content="width=1020px"/>