当我在iPad上横向浏览我的网站时，如何停止iPad放大字体大小？

Question

当我在iPad上查看我的网站示例页面时，实际上宽度不够，因此所有内容都有些拥挤，特别是当您扩展部分时。因此，我将iPad扭转以横向查看页面，但是页面并没有利用额外的空间，而只是增大了字体大小。如何让它考虑到现在拥有的额外宽度呢？

- Paul Taylor

Answer 1

只需添加

。

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

这个问题已经在这里讨论过了； 当iPhone从纵向变为横向时保留HTML字体大小

- user4841042

---

我尝试过那个，但不幸的是它搞乱了我的桌面，无法利用屏幕上额外的宽度，这与我在iPad上尝试实现的相反。 - Paul Taylor

Answer 2

使用viewport meta标签可以在iOS上改善您的网页内容的呈现效果。通常，您使用viewport meta标签来设置视口的宽度和初始缩放比例。例如，如果您的网页比980像素窄，则应将视口的宽度设置为适合您的网页内容。如果您正在设计iPhone或iPod touch特定的Web应用程序，则将宽度设置为设备的宽度。有关viewport meta标签的详细说明，请参阅支持的meta标签。

由于iOS运行在具有不同屏幕分辨率的设备上，因此在引用设备的尺寸时应使用常量而不是数值。使用device-width表示设备的宽度，使用device-height表示纵向方向的高度。

您不需要设置每个viewport属性。如果只设置了一部分属性，则Safari在iOS上推断出其他值。例如，如果将缩放比例设置为1.0，则Safari假定在纵向方向上宽度为设备宽度，在横向方向上高度为设备高度。因此，如果您希望宽度为980像素并且初始缩放比例为1.0，则应同时设置这两个属性。

例如，要将视口宽度设置为设备宽度，请将以下内容添加到您的HTML文件中：

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

如果要将初始比例设置为1.0，请将以下内容添加到您的HTML文件中：

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

要设置初始比例并关闭用户缩放，请将以下内容添加到您的HTML文件中：

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

创建响应式网页界面，不仅仅是为了看到浏览器在缩小分辨率时显示的变化。还要适应各种设备、浏览器和分辨率，并能够舒适地进行操作。

- Dessy Anggita Sangganingrum

Answer 3

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

这些是适当的媒体查询，将此特定的CSS限制为仅在iPad上以纵向和横向方式显示。以这种方式进行操作不应该对您的桌面视图产生任何影响。

- elpeterson