明天就要开抢 iPhone X 了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?因为 iPhone X 的刘海设计,Web 在 iPhone X横屏时,可能会有些问题: 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的; 但如果是全屏 ..

互域东莞网络公司,专业东莞网站设计,东莞网站建设行业里很有竞争力的团队之一。

您的当前位置:互域网络 >> 网站设计知识 >> web App (手机网站)快速适配iPhone X

web App (手机网站)快速适配iPhone X

302017-10

明天就要开抢 iPhone X 了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有些问题:

  1. 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的;
  2. 但如果是全屏 Web App 就会有问题了,比如背景色和页面的契合程度之类的;
  3. 有的 iOS app 内置 WKwebview 可能会为了避免一些bug,而采用统一的行为,就是禁用 iOS 11 自己的内容区域判断,从而让 H5 默认全屏,如下图:

解决方案

1. 默认全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">   

在 viewport 的 meta 属性中,添加 viewport-fit=cover 即可。

viewport-fit 默认值为 auto/contain,全屏值为cover,是不是感觉很熟悉?嗯,和 background-size 以及 object-fit 一样的。

2. 设置页面边距为安全区域边距

body{       padding:          constant(safe-area-inset-top)          constant(safe-area-inset-right)          constant(safe-area-inset-bottom)          constant(safe-area-inset-left);   } 

嗯,constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性,专门用于应对刘海的。。。

当然,这里的padding只是用于匹配iPhone X默认的安全区域的,你可以设置任何值,不过建议要不小于默认的安全区域值。

当前版本,横屏时,各属性的值

safe-area-inset-top = 0   safe-area-inset-right = 44px   safe-area-inset-bottom = 21px   safe-area-inset-left = 44px   

竖屏时各值都是 0,但竖屏时需要特别留意 status-bar(44px) 和 home-indicator(34px)。

[ 关键字:手机网站 web App iPhone X ]


相关阅读:
  • HTML5制作手机营销型网站 [04-02] 移动互联网的发展进程来看,PC互联网、移动互联网和物联网是移动互联网发展的三个主要阶段。在2011年,中国智能手机的出货量达到了1.06亿台,标志着..
  • 手机版网站和PC版网站的区别 [05-28] 专业版的手机网站主要是站在用户体验的角度,将各个板块的功能重新按照手机屏幕的尺寸来设计,而自适应手机屏幕的网站是在PC网站的基础上,让它在兼..
  • 企业为什么要建立手机网站 [05-18] 未来互联网的趋势就是移动手机的天下。无论企业是否已建立网站,都可以直接建立手机网站,向手机用户发送企业信息,达到迅速扩大市场、提升企业形象..
  • 智能手机打开网站如何自动跳转到手机版网站? [01-25] 目前很多网站已经出现了手机版网站,手机网站是和互联网上的网站同步更新的,其实办法很简单就是在网站头加入一句判断语句,判断是手机访问网站时就..
  • 二维码与手机网站的商业应用 [01-10] 互域网络移动手机网站设计 以人性为出发点,深入研究使用者的浏览习惯与各大行动设备的差异,达到兼具视觉美感、操作简约、有效布局及跨浏览器、跨屏..
  • 东莞手机网站设计的技术与现状 [11-30] 东莞企业的官方网站应该要考虑建一个手机专用的手机网站建设。触屏手机网站在中国还属于起步阶段,如果你有手机网站建设,3G网站制作,3G智能手机网..
  • 手机网站和普通网站的区别 [05-04] 手机网站和普通网站有什么区别呢,互域网络和你一起来盘点。正是由于网站建设和移动网站建设的诸多不同,


在线QQ咨询