Geek Answers Handbook

CSS3 Media Requests Not Working

I recently developed a mobile version for a website and just want to be able to modify the CSS file if a browser is detected on a mobile device. You can look at my previous attempts here , but now I decided that the most feasible way to do this would be to focus on Media Queries.

The problem I have here is that the media inquiries just don't work. It always loads the default stylesheet. Here is the code I have:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Am I missing something with this code? I tried using the many tutorials offered for this, but no one helps me. I really came to a standstill, so any help would be greatly appreciated.

+5
source share
4 answers

There are no attributes in the default stylesheet that could not load it.

You can give it media="screen and (min-width: 481px)", but it will lead to the danger that older browsers also do not load it.

It’s usually best to have a default stylesheet loaded and just make sure the mobile phone stylesheet undoes everything you don’t need from the default stylesheet.

+6
source

Completing the conditional with min-device-widthworked for me on iOS. Pay attention to the device words. However, it worked perfectly on android, even without a text device.

+2
source

bootstrap -, IE8, javascript css3-mediaqueries.js, . , - javascript, - css

:

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css , .

+1

initial-scale=1.0 maximum-scale=1.0, , user-scalable=0. , , .

+1

More articles:


All Articles