css - 视口(viewport)问题，使用设备宽度时在 ipad 上放大

Question

我的网站在 iPad 上的显示方式有问题。我尝试将视口(viewport)设置为:

<meta name="viewport" content="width=device-width, initial-scale=1">

可以在http://erichschubert.com/viewport.html看到.

但它总是会导致我的网站放大显示，即使缩小，也看不到整个网站。

截至目前，我已经在运行它:

<meta name="viewport" content="width=1024">

可以在http://erichschubert.com看到.

它看起来不错，但是，当 ipad 转到横向时，它会放大并在右侧留下一个巨大的黑色边栏。

网站上的标题位置固定，放大时也无法正常显示。问题仅仅是固定了吗？我希望能够以纵向和横向显示整个站点，并且还能够统一放大。

非常感谢您提前提供的任何帮助。

Answer 1

initial-scale=1 只有在与 media queries 一起使用时才实用，因此它可以准确地缩放页面以适应该媒体查询的自定义样式。

将其更改为 width=1024 只会强制固定页面宽度，这对您的情况没有用。

在没有缩放问题的情况下缩放页面的最流畅方法是使用媒体查询，以允许它根据屏幕大小调整大小。

大多数设备在检测到方向变化时会重新评估屏幕宽度，而其他设备则会简单地放大以使纵向布局适合横向 View 。

如果你想确定，你可以使用:

@media only screen and (orientation:portrait) {
    /* portrait stuff here */
}

对于横向:

@media only screen and (orientation:landscape) {
    /* landscape stuff here */
}

我不建议针对单个设备如此具体，这是一项永无止境的工作量。 “iPad”过去表示 768px x 1024px，但现在也涵盖 2048px x 1536px。总会有新设备出现，但它们都可以通过简单的媒体查询进行定位。