Question

为防止在我的网页中横向滚动，我使用了3种不同的样式表用于移动设备，平板电脑和桌面设备。我试图告诉浏览器在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并缩小网页以防止水平滚动条。这样，文本非常小而且不可读。

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

非常感谢你。

Answer 1

尝试以下元标记

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

Answer 2

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

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

2 个答案: