How to stop iPad making fonts bigger when viewing my site on iPad in landscape mode
When I view my website the example page on my iPad is not really wide enough, so it all calmed down a bit because there are many columns (especially when expanding sections). So I twist my iPad to view the page in landscape
and instead of using the extra space, it just enlarges the font, how can I get it to consider the extra width it now has.
source to share
Just add
html{ -webkit-text-size-adjust: 100%; }
This has already been discussed here; Maintain HTML font size when changing iPhone orientation from portrait to landscape
Use the viewport meta tag to enhance 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 web page is narrower than 980 pixels, you should set the width of the viewport to fit your web content. If you're developing a web app for iPhone or iPod touch, set width to device width. See Supported Meta Tags for a detailed description of the view meta tag.
Since iOS runs on devices with different screen resolutions, you should use constants instead of numeric values when referring to device dimensions. Use device width for device width and device height for portrait height.
You don't need to set every property of the viewport. If only a subset of the properties are specified, then Safari on iOS displays different values. For example, if you set the scale to 1.0, Safari assumes the width is the device's width in portrait and the device's height in landscape orientation. So if you want the width to be 980 pixels and the start scale to 1.0, set both of these properties.
For example, to set the viewport width to device width, 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 an initial scale and disable user scaling, add this to your HTML file:
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
Building a responsive web experience isn't just the excitement of having the display change when the browser minimizes its resolution too much. But also adapt the display so that it works comfortably across devices, browsers and resolutions.
source to share
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
html { -webkit-text-size-adjust: 100%; }
}
These are the correct media queries to restrict this particular css to only iPad in portrait and landscape orientation. Doing this should not affect the desktop presentation.
source to share