媒体查询在浏览器上看起来与移动设备不同

时间:2013-03-05 14:29:48

标签: css css3 mobile media-queries

使用此查询移植布局:

@media screen and (min-width : 320px) and (max-width : 640px)

这是网址:http://www2.madeinweb.com.br/jobs/adc/prototype/html/

我一开始只使用已调整大小的浏览器。但当我试图检查移动设备(iphone 4,5,ipod 4和galaxy S2)时,情况完全不同,非常不同。

所以我开始专注于移动视图(它是一个webview,所以浏览调整它不是一个问题),但当我尝试从Galaxy S3查看它时,结果与浏览器几乎相同(可怕)。

我知道S3的行为应该如此(据我所知),因为它与浏览器的方式相同,但是其他设备呢,我在那里做错了什么?

1 个答案:

答案 0 :(得分:1)

移动设备通常会缩放内容以适应屏幕,您需要告诉设备该网站是否适合移动设备而不是缩放像素。

在html文件的头部添加:

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

这适用于大多数Android设备,iPhone可能需要也可能不需要不同的元标记。