optimizing CSS 720*1280 mobile devices
-
20-06-2021 - |
题
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!
其他提示
Recommendation:
- Use
min-width
andmax-width
in the media queries. - Avoid using
min-device-width
andmax-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
.
Try these:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0