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

Posted 2023-03-06

【中文标题】如何防止移动设备调整大小并使用正确的 css 文件

【英文标题】：How to prevent mobile device to resize and use proper css file

【发布时间】：2014-09-14 16:20:30

【问题描述】：

为了防止网页中的水平滚动，我为移动设备、平板电脑和桌面设备使用了 3 种不同的样式表。我尝试告诉浏览器使用正确的 css 文件，并在 html 文件的头部添加以下标签：

<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 并缩小网页以防止水平滚动条。这样，文本非常小且不可读。

这种方法有什么问题吗？ 我错过了什么？

非常感谢。

【参考方案1】：

试试下面的元标记

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

【讨论】：

这个标签会阻止用户增加缩放吗？

【参考方案2】：

android 上的 Chrome 有一个辅助功能设置，即使页面请求它不可缩放，用户也可以放大和缩小。因此，您可以根据需要设置用户可扩展设置，但浏览器会忽略您。一些可访问性支持者会争辩说您永远不应该禁用缩放。 http://adrianroselli.com/2015/10/dont-disable-zoom.html