Как предотвратить изменение размера мобильного устройства и использование надлежащего файла css

Для предотвращения горизонтальной прокрутки на моих веб-страницах я использовал 3 разных таблицы стилей для мобильных, планшетных и настольных устройств. Я пытаюсь сказать браузеру использовать правильный файл css со следующими тегами в заголовке html-файла:

<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. Но когда я проверил сайт на мобильном телефоне Samsung, он, похоже, использует cssL.css и сжимает веб-страницу, чтобы предотвратить горизонтальную полосу прокрутки. Таким образом, тексты очень маленькие и нечитабельные.

Что-то не так с подходом? Что мне не хватает?

Большое спасибо.

    Попробуйте метатег ниже

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

    Chrome на Android имеет настройку доступности, которая позволяет пользователям увеличивать и уменьшать масштаб, даже если страница запрашивает, чтобы она не была масштабируемой. Таким образом, у вас может быть установленный пользователем набор параметров, как вы хотите, но браузер игнорирует вас. Некоторые сторонники доступности утверждают, что никогда не следует отключать масштабирование. http://adrianroselli.com/2015/10/dont-disable-zoom.html