html - 做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)這樣很容易解決