Site width not suitable for iPhone screen

I want my site width to automatically fit the screen of the iPhone iPhone (testing on iPhone 5). I currently have the CSS width set to 100% and I use this meta viewport tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 

This method has been recommended for this issue: Website does not automatically fit iphone screen

This does not work for me though. The width of the site is still much wider than the iPhone portfolio screen.

How can I get the width of the site for automatic installation on the screen with a portrait of the iPhone?

+4
source share
2 answers

Make sure the viewport is configured correctly:

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

Make sure you don’t have content that is larger than the viewport.

For example, if you have an image that is larger than the viewport, set CSS to

 max-width:100%; 
+12
source

I think you can just be a little longer. This is what works for me.

  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" /> 
0
source

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


All Articles