All geek questions in one place

IOS ignores meta viewport width = device-width, initial-scale = 1.0

When I view the following html file with Safari on iphone, it does not display the entire width of the content as it intended:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>iOS Viewport Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style type="text/css"> body #wrap { width: 1008px; border: 1px solid #000; } h1 { font:30px sans-serif; } </style> </head> <body> <div id="wrap"> <h1>Here some quite eloooongated text that should make the screen at least 1008px wide or more</h1> </div><!-- end #wrap --> </body> </html>

Can anyone see what I'm doing wrong? What it's worth, I have iOS 6.1 and Safari 6.0

+4
source share
2 answers

Despite the fact that I carefully read Apple various recommendations for the viewport, apparently I misunderstood. If the site does not respond, like mine, the correct meta in this case

 <meta name="viewport" content="width=1008"/>

This makes the viewport suitable for content in both portrait and landscape orientations. This approach is discussed here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

+8
source

I was looking for searches to find out if anyone else had this problem. I thought I would share my results.

My refractory site is about 1200 pixels wide, and I wanted it to display the entire width of the site in portrait mode. Setting the scale to 0 also seems to work on what I tested:

 <meta name="viewport" content="width=device-width, initial-scale=0"/>
+2
source

Source: https://habr.com/ru/post/1486739/

More articles:


All Articles