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

android html css media-queries screen-size
Ormoz picture Ormoz · Jul 23, 2014 · Viewed 13.3k times · Source

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.

Answer

karan3112 picture karan3112 · Jul 23, 2014

Try the below meta tag

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

Related questions

Rendering HTML in a WebView with custom CSS

My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, …

Read More
Background image jumps when address bar hides iOS/Android/Mobile Chrome

I'm currently developing a responsive site using Twitter Bootstrap. The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs. It's nearly perfect, except one issue. Using iOS Safari, …

Read More
Default font set on Android

Can anyone tell me what are the bundled fonts on most Android devices, specifically for web pages? Just like Windows has their bundled fonts or Mac font lists, what are the fonts that come with most Android phones and tablets? …

Read More