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

Question

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.

Solution 1

Try the below meta tag

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

Solution 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

Comments

[Ormoz]

Does this tag prevents user increasing the zoom?