Viewport规模网站低于450px

Question

我有一个流畅布局的网站。内容的宽度始终填充屏幕的宽度。这一切都很好，直到移动尺寸，我不希望身体的宽度低于450px。

我在身体上设置了min-width:450px，正如预期的那样，阻止身体宽度减小到该点以下。现在我遇到的问题是屏幕尺寸低于450px的手机，用户必须水平滚动才能看到内容不在视野范围内。

我希望内容使用450px viewport标记从meta缩小。

我试过了：

<meta name="viewport" content="width=450,user-scalable=no">

哪个有效，但它也适用于宽度超过450px的手机和iPad，让它在平板电脑上看起来非常大。有没有办法使用此标记而不将其应用于450px以上的任何内容？

Answer 1

我建议改用媒体查询。

只需将其放在CSS文件的末尾，然后为小型设备添加特殊样式：

@media only screen and (max-device-width : 450px) {
 YOUR STYLES FOR < 450px DEVICES GO HERE
}