How to prevent mobile device to resize and use proper css file

北慕城南 提交于 2019-12-10 15:51:57

问题


to prevent horizontal scrolling in my web pages, I have used 3 different stylesheets for mobile, tablet, and desktop devices. I try to tell the browser to use the proper css file with the following tags in the head of the html file:

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

by doing so, I expect the mobile browsers to use cssS.css. but when I checked the website in a Samsung mobile phone, It appears to be using cssL.css and shrinks webpage to prevent horizontal scroll bar. this way, texts are very small and unreadable.

is there anything wrong with the approach? What am I missing?

thank you very much.


回答1:


Try the below meta tag

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



回答2:


Chrome on Android has an accessibility setting that allows users to zoom in and out even if the page requests that it not be zoomable. So you may have the user-scalable setting set as you want but the browser is ignoring you. Some accessibility proponents will argue that you should never disable zooming. http://adrianroselli.com/2015/10/dont-disable-zoom.html



来源:https://stackoverflow.com/questions/24911220/how-to-prevent-mobile-device-to-resize-and-use-proper-css-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!