Question

当我在我的iPad上查看我的网站example page时，实际上没有足够的宽度，所以因为许多列（特别是当你展开这些部分时）所以它有点紧张。所以我扭动我的iPad以横向查看页面

而不是利用额外的空间，它只是使字体更大，我怎么能让它考虑现在的额外宽度。

Answer 1

添加

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

这已经在这里讨论过; Preserve HTML font-size when iPhone orientation changes from portrait to landscape

Answer 2

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.

Answer 3

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    html { -webkit-text-size-adjust: 100%; }
}

这些是适当的媒体查询，可将此特定CSS仅限于纵向和横向的iPad。这样做不应该对桌面视图产生任何影响。

在横向模式下在Ipad上查看我的网站时，如何阻止iPad使字体大小更大

3 个答案: