0

This is my meta tag...

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

I am using breakpoints as max-320 then max-480, when I'm testing my page from a device width of 320, it's working fine but when testing the page with 480 device width it is still picking the 320 width stylesheet. Why it's picking the wrong stylesheet please help..

<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:portrait)" href="style/xxs_p.css">
<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:landscape)" href="style/xxs_l.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:portrait)" href="style/xs_p.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:landscape)" href="style/xs_l.css">

Is that a problem in my code or it's just the emulator acting weird? Please help!!

John deo
  • 3
  • 4
  • Perhaps add some javascript on the page (innerWindow I think or similar) to output on the emulator how big it thinks the screen is and then work from there. If the size of the screen is what you expect then check your code. – Martin Nov 16 '14 at 14:13
  • javascript : viewportwidth = window.innerWidth, viewportheight = window.innerHeight and output these vars on the page. – Martin Nov 16 '14 at 14:16

2 Answers2

0

Try changing your code to:

media="only screen and (max-device-width:320px) and (orientation:portrait)"

for each line.

Martin
  • 22,212
  • 11
  • 70
  • 132
  • Working thanks :) ..using either min or max width its working but using both limits it's not...what can be the reason for that??? – John deo Nov 16 '14 at 14:48
0

I use this and it works perfectly:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1">
<link href="/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)"  />
<link href="/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />

you have used semicolon instead of comma in your viewport meta, maybe it has caused the problem.

Ormoz
  • 2,975
  • 10
  • 35
  • 50
  • using either min or max width its working but using both limits it's not...what can be the reason for that??? – John deo Nov 16 '14 at 14:47