0

I have the following code in HEAD to use different stylesheets for different device/screen size:

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">

<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->

Inside the defaultStyle_mobile.css as a test, i added *{display: none} to make the entire page blank. I went here http://www.responsinator.com/ to view my webpage and it looks like the mobile stylesheet is not being used. Any idea how to fix it?

Si8
  • 9,141
  • 22
  • 109
  • 221
  • possible duplicate of [CSS3 media queries not working](http://stackoverflow.com/questions/7859336/css3-media-queries-not-working) – cimmanon Mar 03 '14 at 18:38
  • `http://www.responsinator.com` url using iframe, So it normally using your web css not mobile css. in other words, it is not iphone simulator. – Krish R Mar 03 '14 at 18:39
  • Not entirely duplicate as I am already using this line: `` – Si8 Mar 03 '14 at 18:40
  • @KrishR How about http://mattkersley.com/responsive/?google.com/about. That is also showing the web css instead of mobile css. Do I have to use the `@media` inquiring inside the .css file as well? – Si8 Mar 03 '14 at 18:41
  • Yes. It also used the iframe – Krish R Mar 03 '14 at 18:42
  • Why include min-width? Do you want your viewers to view the desktop CSS if they are on a screen with a width smaller than 320px? – TylerH Mar 03 '14 at 18:44
  • 2
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Krish R Mar 03 '14 at 18:45
  • Wow... seems like I have to create multiple stylesheets for multiple screen size to ensure it works around all devices. – Si8 Mar 03 '14 at 18:46
  • Is it recommended to use % or PX when using position? I am predominantly using PX instead of percentage otherwise the images doesn't sit well with the layout. – Si8 Mar 03 '14 at 18:47
  • There are advantages and disadvantages to both `%` and `px`. It depends on the use, really. See this answer for more info: http://stackoverflow.com/a/609561/2756409 – TylerH Mar 03 '14 at 18:49

1 Answers1

1

Try replacing your mobile stylesheets with these:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)"     href="theStyles/defaultStyle_mobile.css" />
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)'     href='theStyles/captionStyle_mobile.css' />

If that's not the case, then the problem is with the simulator. Try resizing your browser.

Abdullah Bakhsh
  • 658
  • 1
  • 9
  • 15
  • Trying to figure out what is the difference... You is working. – Si8 Mar 03 '14 at 18:44
  • Removed the 'only' directive in the media attribute :) – Abdullah Bakhsh Mar 03 '14 at 18:44
  • You also used the `max-width` property instead of `max-device-width`. These are two distinct properties and are calculated differently. PS, why the single quotes in the second line of your answer? – TylerH Mar 03 '14 at 18:45
  • @SiKni8 see this answer for that information: http://stackoverflow.com/a/6996549/2756409 – TylerH Mar 03 '14 at 18:47
  • 1
    max-width is the width of the browser (did this to work with the simulator). max-device-width is the actual width of the device's screen. It is up to you, but using the first helps with development. – Abdullah Bakhsh Mar 03 '14 at 18:48