Author Topic: Modern Web Engineerinng  (Read 993 times)

munem15-4873

  • Newbie
  • *
  • Posts: 14
Modern Web Engineerinng
« on: September 27, 2018, 12:07:12 AM »
Stop iPhone Simulator Image Resizing

One nice thing about the iPhone and iPod Touch is that Web designs
automatically rescale to fit the tiny screen. A full-sized design, unless
specified otherwise, would just shrink proportionally for the tiny browser,
with no need for scrolling or a mobile version. Then, the user could easily
zoom in and out as necessary.

There was, however, one issue this simulator created. When responsive Web
design took off, many noticed that images were still changing
proportionally with the page even if they were specifically made for (or
could otherwise fit) the tiny screen. This in turn scaled down text and other
elements.
Because this works only with Apple’s simulator, we can use an Applespecific
meta tag to fix the problem, placing it below the website’s <head>
section.

1 <meta name="viewport" content="width=device-width; initialscale=
1.0">

Setting the initial-scale to 1 overrides the default to resize images
proportionally, while leaving them as is if their width is the same as the
device’s width (in either portrait or landscape mode).