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

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">