3

When I view my website example page on on my iPad there isn't enough width really so its all a bit cramped up because many columns (especially when you expand the sections). So I twist my iPad to view the page in landscape

and instead of making use of the extra space it just makes the font larger, how can I get it to consider the extra width it now has.

Paul Taylor
  • 12,050
  • 34
  • 149
  • 295

3 Answers3

1

Just add 

html{ -webkit-text-size-adjust: 100%; }

This was already discussed here; Preserve HTML font-size when iPhone orientation changes from portrait to landscape

Community
  • 1
  • 1
  • I tried that but unfortunately that messed up my desktop it wouldnt take advantage of additional width on screen, the opposite of what I was trying to achieve with iPad – Paul Taylor Apr 30 '15 at 08:35
1

Use the viewport meta tag to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone or iPod touch-specific web application, then set the width to the width of the device. Refer to Supported Meta Tags for a detailed description of the viewport meta tag.

Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name="viewport" content="width=device-width">

To set the initial scale to 1.0, add this to your HTML file:

<meta name=“viewport” content="initial-scale=1.0">

To set the initial scale and to turn off user scaling, add this to your HTML file:

<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

Create responsive web interface, is not merely the thrill of seeing the display changes when the browser is in big-minimize its resolution. But also accommodate the display to be able to perform comfortably in a variety of devices, browsers and resolution.

Dessy Anggita Sangganingrum
  • 187
  • 1
  • 7
0
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    html { -webkit-text-size-adjust: 100%; }
}

These are proper media queries to limit this particular css to only iPad in portrait and landscape. Doing it this way shouldn't have any effect on your desktop view.

elpeterson
  • 41
  • 3