我的移动设备是 HTC One X,分辨率:720x1280
我需要做响应式网页
在 html 我写<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
但在浏览器中我有 360px 宽度。我已经使用$(window).width()
或 document.width
我的移动设备是 HTC One X,分辨率:720x1280
我需要做响应式网页
在 html 我写<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
但在浏览器中我有 360px 宽度。我已经使用$(window).width()
或 document.width
它以 360 像素宽渲染,但深度为 720 像素。换句话说,它使用 4 个像素来显示 1 个普通像素。因此,所有正常图形都会显得模糊,因为它将图像放大两倍。所以解决方案是创建两倍大的图像,并将它们缩小 50%。
据我所知,声明观点时的语法应该是:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
请注意,它使用逗号而不是分号,并且在结束 /> 之前没有任何内容。
根据我的阅读,使用分号可能会导致某些浏览器出现问题。
祝你好运!
那可能是您的压缩分辨率,而不是您的缩放分辨率。
如果您查看智能手机的规格,您会发现 4.7 英寸的屏幕具有 1280 像素 x 720 像素的分辨率。见规格。这与我的 13 英寸 Macbook 的分辨率大致相同,这是不可能的,因为我的 Macbook 的宽度是其两倍多。因此,他们正在推销压缩分辨率,这不是浏览器在处理媒体查询时考虑的分辨率。