如何防止移动设备调整大小并使用正确的CSS文件

Question

为了防止网页出现横向滚动条，我使用了三种不同的样式表来适配移动设备、平板电脑和台式机。我尝试通过在HTML文件头部使用以下标签告诉浏览器使用正确的CSS文件：

<link href="static/css/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="static/css/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)"  />
<link href="static/css/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />

通过这样做，我希望移动浏览器使用cssS.css。但是当我在三星手机上检查网站时，它似乎正在使用cssL.css，并缩小网页以防止水平滚动条出现。这样一来，文本非常小，难以阅读。

这种方法有什么问题吗？我漏掉了什么？

非常感谢。

- Ormoz

Answer 1

尝试以下元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">

- karan3112

---

这个标签是否可以防止用户增加缩放比例？ - Ormoz

Answer 2

安卓上的Chrome浏览器有一个辅助功能设置，允许用户放大和缩小页面，即使该页面要求不可缩放。因此，您可能已经按照预期设置了user-scalable选项，但浏览器却忽略了您的设置。一些辅助功能倡导者会认为您永远不应该禁用缩放。http://adrianroselli.com/2015/10/dont-disable-zoom.html

- John Weidner