如何在这种特殊情况下处理多个设备?

时间:2015-04-15 10:07:07

标签: android html css iphone device

我尝试为不同的设备测试网站。 我只有一台iPhone 4和一台iPad 2进行测试,其余的我使用chrome来模拟设备。

我注意到chrome确实很奇怪。

例如,在iphone 5预览中,它显示正确但容器显示的非常小。

enter image description here

如果我检查iphone 6 plus,那么内容会被拉大。我应该看到5行,我只看到2行。

这与iphone 4预览相同。但在我的真实设备上它在iPhone上显示确定。

enter image description here

如果它有帮助,这是一些css:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden; 
}

#container {
    display: -ms-flexbox;      
    display: -webkit-flex; 
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

对于客户端,移动功能是首要任务。我不知道自己该做什么?

我也有这个:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

但无论有没有没有区别。

如果我使用chrome检查器测试其他网站,则有些问题存在同样问题,有些则没有。我该怎么办? 我完全迷失了。

1 个答案:

答案 0 :(得分:1)

最简单的解决方案:您是否重新加载了该页面?

如果这没有帮助:某些网站会在其Cookie中存储与该视图相关的数据。尝试清除您的Cookie。