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

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

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

Answer 3

高度就用百分比呗

Answer 4

媒体查询或者百分比布局

Answer 5

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

淘宝flexible.js

Answer 10

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

Answer 11

我写移动端页面也是用rem width没有问题 但是height确实不太行 尤其是要求全屏 的 更苦逼 所以 建议你还是在设计页面的时候 版心部分定一个max-height
还有就是 最近在朋友的推荐下接触了vw vh这两个新单位 相对于可视区域的 感觉还是很不错的 你可以试试

Answer 12

height写死px, width用百分比

Answer 13

就用rem啊，不过要做好适配。另外要注意在chrome上最小rem是12px

Answer 14

上面的回答都不在点子上，楼主的意思是，设计稿是按750 1366设计的，这个本身是没问题，问题在于，设计师，
1、在一页上放了很多元素，
2、或者元素虽然放的不多，但很多元素的宽度必须等于页面宽度，
第一种情况，解决方法，通过媒体查询，缩小每个元素的大小，来适配比较奇葩比例的手机，比如华为的mate系统，p系列，手机屏幕宽，但手机长度短，还有虚拟键盘区域，设计师按9/16设计的，但到了这种奇葩手机上，然后在微信里，微信头部还要占用部分区域，实际显示比例为360/536，比较难适配。iPhone6 7 8在微信中为 375/611。
第二种，因为元素宽度必须等于页面宽度，那么高度是不可能变的，极难适配。
我做私活，就是被这种设计师，坑的死去活来的，因为设计稿已经定了，就不能再改了。

Answer 15

我也是做活动页全屏展示的,被适配折磨的不行,请问您有好的办法吗?