optimizing CSS 720*1280 mobile devices

Question

I'm trying to optimize my webpage to 720*1200 mobile devices: My page

It works perfectly on 320*480 and 480*800 devices, but not on 720*1200. The page loads zoomed in, just like the layout viewport would be 720*1030 but the visual viewport would be 360*515.

I've set the viewport tag, but it hasn't any effect.

<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />  

Thanks for any help!

Answer 1

Recommendation:

• Use min-width and max-width in the media queries.
• Avoid using min-device-width and max-device-width.

Viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Add minimum-scale, maximum-scale, or user-scalable if needed.

Media queries:

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:720px)"
      href="css/style-720.css" />

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:480px) and (max-width:719px)"
      href="css/style.css" /> 

<link rel="stylesheet" type="text/css"
      media="only screen and (max-width:479px)"
      href="css/style-320.css" />  

Explanation:

min-width and max-width are easier to work with than min-device-width and max-device-width. Using all 4 of them may result in media queries that will not be applied in some cases, since the two sets of values do not always match.

On iOS devices, min-device-width and max-device-width act on the width in landscape mode, regardless of orientation, while min-width and max-width act on the width of the current orientation.

Also, on Android devices, min-device-width and max-device-width correspond to physical pixels, while min-width and max-width correspond to dips (device-independent pixels), which makes it easier to work with devices with a variety of pixel densities.

The Boston Globe, the best example of adaptive-content responsive design, works almost entirely on min-width and max-width.