All geek questions in one place

How to set the correct width for mobile webpage on iphone

I am trying to set up my mobile web pages for iphone, but not showing the correct width.

The problem is that .. In most of my posts on the page, they have images in widths from 480 pixels to 500 pixels so if I set up the meta as follows:

1 = this will show all of the images in the message , but the page screen is larger than the iphone screen ..

name = "viewport" content = "width = 480px; initial-scale = 1; Maximum scale = 1; user scalable = 1;"

2 = this will result in the pages being displayed correctly using the iphone's internal screen. , but the right side of the images will be hidden outside the width of the screen in standby mode .

name = "viewport" content = "width = device width; Initial scale = 1; Maximum scale = 1; user scalable = 1;"

Please help install to show full images on iphone, and the webpage is scaling the correct screen width.

test use iphone at: http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186

+3
source share
1 answer

You might want to try something like this:

lets say your html looks like this:

<body>
  <div id="wrapper">
    <img src="small-image.jpg" />
  </div>
</body>

css:

/* you can modify this as you see fit */
@media screen and (max-width: 480px) {

  div#wrapper {
    max-width: 100%;
    overflow:hidden;
  }
  img {
    max-width: 100%;
  }

}

. , , . max-width . , , , .

, , , , .

+5

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

More articles:


All Articles