Question

我的网站在ipad上的显示方式存在问题。我试图将视口设置为：

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

但它总是会导致我的网站放大，甚至在缩小时，整个网站都不可见。

截至目前，我已将其投放运行：

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

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

网站上的标题有一个固定的位置，放大后也无法正常显示。问题只是修复了吗？我希望能够以纵向和横向显示整个网站，并且能够均匀放大。

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

Answer 1

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

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

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

大多数设备在检测到方向变化时会重新评估屏幕宽度，而其他设备只需放大以适应纵向布局到横向视图。

如果您想确定，可以使用：

@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。总会有新设备，但它们都可以通过简单的媒体查询进行定位。