Geek Answers Handbook

IPad scaling to match doesn't work on webpage with minimal content

Consider the following rudimentary html code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>iPad test</title> <meta name="viewport" content="width=device-width"> <style> body { margin:0; } #content { margin: 0 auto; width: 980px; border:1px solid #c4c4c4; background-color:#f5f5f5; } </style> </head> <body> <div id="content"> A small amount of content </div> </body> </html>

When viewed on an iPad, the main 980px content area will not automatically scale to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, that is ... enough to cause vertical scrolling, the page automatically scales to iPad.

Does anyone know why this is? I searched high and low and cannot find a way to make auto scaling occur when there is minimal content on the page.

Changing the contents of the viewport to width=980 fixes the problem, of course, however I am creating a responsive website, so viewport should be device-width .

I am using a media query to change the CSS for the content area on smartphones (up to 100% width), and I was hoping to use the standard desktop version of the website for iPads.

Any ideas would be highly appreciated.

Note. I am testing an iPad with a retina display, I am not sure what is happening on older models.

+4
source share
2 answers

After a break from this, I returned from a different angle - if setting the width of the viewport to a certain value fixes my problem for the iPad, why not do just that.

Thus, the solution for me was to handle smartphones by default, the width of the viewport to the width of the device, and then define for iPads and adjust the width of the viewer:

 <meta name="viewport" content="width=device-width"> <script type="text/javascript"> if(navigator.userAgent.match(/iPad/i)) { viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=980'); } </script>

Thanks for your suggestions insertusernamehere

+7
source

Try the following:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

After that, the contents will match.

+2
source

More articles:


All Articles