html5 手机web

摩羯座的黄小姐 发布于 2015/04/15 16:08
阅读 296
收藏 0

现在做一个网页,要在手机浏览器中打开,尝试了最新的html5,css3的技术。

由于手机浏览器分辨率的不同,导致了白色框出现下面效果,请高手帮忙回答,

iphone6下:

华为荣耀下:

iphone下变形了,

最外层白底的高度的css

.picWrap{
    width: 100%;
    height: 19.2%;
    clear: both;
    position: relative;
}

高度给的是19.2%

然后里面又一层div,包住了内容,效果图中距离顶部是8px,白底是90px ,所以css 给了个margin-top:

8.8888888888889%

华为的浏览器分辨率是360*460 看上去效果是垂直居中的,

iphone6的浏览器分辨率是375*667 看上去的效果就不是垂直居中

该怎么写样式才能解决呢?

加载中
0
hmh
hmh
高度为什么要用百分比呢。。。。
摩羯座的黄小姐
摩羯座的黄小姐
这样在不同分辨率下,效果才能一致。固定了高度,分辨率大的手机,会留出很多空白
0
OSC首席键客
OSC首席键客
没看出来哪里不同。。。
摩羯座的黄小姐
摩羯座的黄小姐
嗯,我没有清楚截图,现在补充了,在苹果下变形了。
0
祺爸PiscDong
祺爸PiscDong
没看出有什么不妥
0
vvtf
vvtf
习大大套餐要9699??????????
摩羯座的黄小姐
摩羯座的黄小姐
啊,这个是我随便写的,你能不能看重点
返回顶部
顶部