html - 做h5全屏的活动页面的时候。设计师通常是给iphone6尺寸的设计稿。那么如何在大多数手机上适配啊？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - 做h5全屏的活动页面的时候。设计师通常是给iphone6尺寸的设计稿。那么如何在大多数手机上适配啊？

巴扎黑 2017-04-17 11:55:01

[CSS3讨论组]

2137

全屏h5动画活动页面. 给的是750的尺寸设计稿.

我采用的是rem方案. 那现在的问题是. 按照设计稿的标注去写css.

内容宽度的话不会有问题. 但高度有问题呀.. 因为有些浏览器会有地址栏和工具栏.

会占据一些高度. 这时候你按照设计稿上标注写出来的页面. 在高度上都挤在一起或放不下了...

因为要全屏.......

有没有什么优雅的解决办法. 在不改设计稿的情况下呢...

巴扎黑

全部回复(13)

黄舟2017-04-17 11:57:01 13楼

既然是全屏的页面你就去申请全屏权限，或者做个判断如果不是全屏的话不予以显示并提醒用户开启全屏。
另外现在大部分H5页面主要是在微信显示的，做好微信的适配就好了。

赞 +0

添加回复

怪我咯2017-04-17 11:57:01 12楼

做媒体查询，百分比布局或者rem，em都可以

赞 +0

添加回复

大家讲道理2017-04-17 11:57:01 11楼

高度就用百分比呗

赞 +0

添加回复

迷茫2017-04-17 11:57:01 10楼

媒体查询或者百分比布局

赞 +0

添加回复

高洛峰2017-04-17 11:57:01 9楼

推荐一个基本适配方法吧
head加入

<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi,minimal-ui">

其中width=设计稿宽度，然后整个页面基本可以按照设计稿的px来定位，小屏幕比较蛋疼，比如iphone 4s会缺失掉底部，所以设计元素内容还是得考上一些，如果内容可以靠滑动呈现的就忽略了吧

赞 +0

添加回复

PHP中文网2017-04-17 11:57:01 8楼

之前看到的一种用法，用padding-top来做高度自适应，就是内容要绝对定位进去。可以按需使用的样子。

赞 +0

添加回复

PHPz2017-04-17 11:57:01 7楼

写CSS的时候使用rem,然后动态改变rem的值即可

赞 +0

添加回复

黄舟2017-04-17 11:57:01 6楼

https://segmentfault.com/a/11...
https://segmentfault.com/a/11...

赞 +0

添加回复

怪我咯2017-04-17 11:57:01 5楼

淘宝flexible.js

赞 +0

添加回复

ringa_lee2017-04-17 11:57:01 4楼

尽量用vw 百分比
calc(100vw - 20px)这样很容易解决

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>