html - 做h5全屏的活动页面的时候。 设计师通常是给iphone6尺寸的设计稿。那么如何在大多数手机上适配啊?
巴扎黑
巴扎黑 2017-04-17 11:55:01
0
13
1519

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

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

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

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

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

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

巴扎黑
巴扎黑

Antworte allen(13)
黄舟

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

刘奇

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

大家讲道理

高度就用百分比呗

迷茫

媒体查询或者百分比布局

小葫芦

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

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

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

洪涛

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

PHPzhong

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

黄舟

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

刘奇

淘宝flexible.js

左手右手慢动作

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage