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/
Related
The website I'm having problems with is "kayparkmemorials.com". If you view it on your laptop/desktop, and you scale the website down to your smallest possible scalable window, it appears to function as expected responsively. For some reason, when I view the site on my mobile phone, it displays the view as if it's in tablet view.
I have the max-width for mobile view set as: #media screen and (max-width: 815px)
Anyone had any previous issues similar to this and have some tips? Another important thing I should add is that when testing the site on Dreamweaver by scanning the barcode to get the preview on my mobile, it previewed as expected. I didn't change anything to the coding after that point and as soon as it is officially on the web (1&1 HOSTING), the responsiveness on mobile isn't doing what it should.
You need to add a viewport meta tag to the head of your page, if you don't do this the default behaviour for smart phone browsers is to scale your desktop page.
What you want is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Good luck!
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"/>
I was testing this site that I just developed on wordpress: circoloshowroom.com
and I added all the proper media queries in order for it to be responsive. Now, when I resize the browser window my media queries work fine. However, when I look at the site on my phone or tablet it shows the site fully and the media queries get ignored. Any suggestions? Is it something Wordpress does to my site from the beginning.
Thanks.
I resolved this by adding this to the top of header.php file
<meta name="viewport" content="width=device-width; initial-scale=1.0">
FYI: By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.
Somethis I just learned from this super helpful blog post: webdesignerwall.com/tutorials/responsive-design
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.