我一生中第一次尝试使用媒体查询。我想实现的是一个移动沥青的在线表格(基本上为Android MDPI/HPDI和iPhone 3至4)。
我所做的是用320px的宽度背景图像, 进行320px屏幕的媒体查询,
@media only screen
and (min-device-width : 120px)
and (max-device-width : 320px)
{
body {
background-image:url( ../img/bg-320.jpg );
background-repeat: no-repeat;
width: 320px;
height: 436px;
margin:0; padding:0; border:0;
}
此外,在同一 cs 上,还有一个小屏幕(小于 480px 宽度)的媒体查询(小于 480px 宽度背景图像),这样:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
body {
background-image:url( bg-480.jpg );
background-repeat: no-repeat;
width: 480px;
height: 800px;
margin:0; padding:0; border:0;
}
检测效果很好, 但问题是480宽的装置 放大了480px的背景, 因为对于他们的屏幕来说太大了, 这是非感官的!
即使是陌生人, 如果试图将320px- CSS- 区块( 上面第一个) 装入 480 宽的装置上, 效果也不错! 没有放大! 但图像显然有点模糊 。
这发生在我的iPod Touch 和我的HTC渴望。
有人能帮我吗?
顺便说一句,我的头看起来像:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</head>
EDIT:
我刚意识到媒体的询问 与我的问题无关
问题基本上在于:为什么在两个 480px-width 设备上,一个320px-width-back-image 被视为全屏,而一个 480px-width-wack-image 被放大? 这只是一种非感知!