来自不同浏览器(Android)的不同媒体查询断点是一般人们应该期待的吗?

时间:2015-07-29 17:48:46

标签: android css cross-browser media device-width

我使用华为Ascend Y330 / Android 4.2中的六种不同浏览器测试了媒体查询,并获得了mqtest.io报告的三种不同的设备宽度结果。

对于每个浏览器,我然后使用css在我自己的html页面上测试实际断点: @media only screen and (max-device-width: 320px) - 并通过更改像素值直到格式化更改出现。所有六种情况下的设备宽度与mqtest.io为设备报告的内容一致。

显然,问题是由于浏览器的不一致而无法控制设计。这是一个“本地”问题,还是使用@media时的一般问题?

根据mqtest.io和网页测试结果

  

Dolphin和Android默认浏览器
设备宽度:480px
  设备高度:800px

     

Opera和Google Chrome
设备宽度:320px
设备高度:   534px

     

Firefox和Firefox Beta版设备宽度:320px
设备高度:   533px

     

屏幕:480x800左像素比率:1.5(由mqtest.io报告所有   六个浏览器)

2 个答案:

答案 0 :(得分:0)

以下代码是否解决了这个问题?

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

答案 1 :(得分:0)

我在测试页面中有这个代码,但它没有帮助。此外,我还运行了一些测试,显然设备宽度是不可预测的。谢谢你的回答。