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"/>
Related
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.
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'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
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'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.