Geek Answers Handbook

How to prevent mobile device resizing and using proper css file

to prevent horizontal scrolling on my web pages, I used 3 different stylesheets for mobile, tablet and desktop devices. I am trying to tell the browser to use the correct css file with the following tags in the header 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 this, I expect mobile browsers to use cssS.css. but when I checked the site on a Samsung mobile phone, it seems to be using cssL.css and compressing the web page to prevent a horizontal scrollbar. therefore, the texts are very small and unreadable.

Is there anything wrong with this approach? What am I missing?

Thank you very much.

+4
source share
2 answers

Try the lower meta tag

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

Chrome on Android has an accessibility setting that allows users to zoom in and out even if the page asks that it not be scalable. Thus, you can have a user-set parameter set as you want, but the browser ignores you. Some proponents of accessibility argue that you should never turn off scaling. http://adrianroselli.com/2015/10/dont-disable-zoom.html

+1
source

More articles:


All Articles