I'm sure this has been asked, but I have not found the answer.
I am using multiple stylesheets for different viewport sizes to target the iPad in portrait/landscape view.
When I rotate the iPad, it loads the correct stylesheet for portrait, however it doesn't auto resize to fit to screen correctly. I must zoom out in order for the page to display at full width.
Is there a way to correct for this so that when the iPad rotates between landscape/portrait, it centers the page correctly again?
I had the same problem and this metatag solved the problem:
<meta name="viewport" content="user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />
Maybe you'll have to tweak a little to work with your website.
Or head to Apple's documentation, Configuring the Viewport.
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.
I can't figure out the behavior of the "emulate viewport" option in the new Chrome's device emulation panel.
When unchecked, everything works as it should. I can visualize the device viewport in my browser and the changes I make in the code get properly visualized in the browser.
When the option is checked, though (as it is by default), it messes up my layout completely. Horizontal scrolling bars appear (even using .container{max-width: 100%;} or overflow: hidden), the font gets rendered way bigger than it should, and the browser seems to ignore my changes to the CSS.
In the documentation, I read:
Emulate viewport - zooms the page out to the physical default viewport of that device. In the case of the Nexus 4 this is 768x1280.
Can someone please translate in plain English what kind of behavior this option activates, and why should I want to keep it flagged?
I had similar problem. When I would simply change the resolution of the window everything would render nicely according to the screen width. But whenever I would try to emulate in Chrome with device emulator, columns would not change their size and display on the screen with their physical width. Then, I figured out to add the following line to the section of the html file. Hope that helps.
<meta name="viewport" content="width=device-width, initial-scale=1">
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!
It appears that when I access my website via the iPad (the newest gen) it loads the responsive site correctly starting in landscape mode. When I switch to portrait, I can see that the site adjusts properly and it also looks fine. It's when I switch back to landscape again that the site appears to zoom in a bit and needs to be zoomed out.
I have the following code in the page to try to combat this, but it still occurs...
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Any help is much appreciated!
Seems it can be fixed by removing the initial-scale property, or alternatively by JS
Look here: Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone
here: iOS zooming issue on responsive site from portrait to landscape break points
and here: http://opensourcehacker.com/2012/01/09/zoom-on-orientation-change-fix-for-mobile-browsers-mobilizing-websites-with-responsive-design-and-html5-part-8/
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"/>