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

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

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

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

日期:2017-10-30   来源:原创
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? [12-06] HTML5作为网站建设的新一代程序语言,经过几年的发展,其书写的标准和标准终于尘埃落定,它主要改良的是手机网站建设中存在的复杂问题(Emerson),开..
  • 让手机网站设计更适合移动用户 [12-03] 1。让你的网站作出回应。响应性网站设计包含关于您访问的任何设备的所有相同内容和信息,但是它根据设备屏幕的大小改变其显示和安排。这是使您的网站..
  • PC网站设计和手机网站设计有哪些不同? [11-29] PC网站和手机网站设计上的不同点有哪些?随着互联网的发展,手机网站越来越受大家的欢迎,今天小编就从一个办公室装修设计师的角度(angle),给大家..
  • 手机网站建设要考虑哪些问题? [11-18] 手机网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。一个公司网站主要的访问者有几类,即:直接用户、经销商、..
  • 东莞手机网站制作公司哪家好? [11-08] 1、节省成本:2、多端口访问企业在手机上建设自己的手机网站,可以多渠道展示企业风采、传播企业文化、树立企业形象、提高企业知名度。深网网络分析,..
  • 东莞三网合一网站制作 [11-07] 三网合一建站如何做?事实上,大多数网站建设公司都说,网站的第三部分并不太复杂,也不太高端,只要将手机的地址与公共号码菜单绑定,就可以在Wech..
  • 建设手机网站要考虑哪些方面 [11-06] 手机端跟电脑PC端其实是相通的,所以在手机网站建设(construct/build)前,就是先做好PC端的网站,关键(解释:比喻事物的重要组成部分)是非常多公司..

在线QQ咨询