這次為大家帶來有關HTML5頁面在iPhoneX適配問題,有關HTML5頁面在iPhoneX適配的注意事項有哪些,下面就是實戰案例,一起來看一下。
1. iPhoneX的介紹
螢幕尺寸
倍圖其實就是像素尺寸和開發尺寸的倍率關係,但這只是外在的表現。倍圖核心的影響因素在於PPI(DPI),了解螢幕密度與各尺寸的關係有助於我們深度理解倍率的概念:《基礎知識學起來!為設計師量身打造的DPI指南》
iPhone8在本次升級中,螢幕尺寸和解析度都遺傳了iPhone6以後的優良傳統;
然而iPhone X 無論是在螢幕尺寸、解析度、甚至是形狀上都發生了較大的改變,下面以iPhone 8作為參照物,看看到底iPhone X的適配我們要怎麼考慮。
2. iPhoneX的適配---安全區域(safe area)
蘋果對於iPhone X 的設計佈局意見如下:
核心內容應該處於Safe area 確保不會被設備圓角(corners),感測器外殼(sensor housing,齊劉海) 以及底部的Home Indicator 遮擋。也就是說我們設計顯示的內容應該盡可能的在安全區域內;
3. iPhoneX的適配---適配方案viewport-fit 3.1 PhoneX的適配,在iOS 11中採用了viewport-fit的meta標籤作為適配方案;viewport-fit的預設值是auto。
viewport-fit取值如下:
auto 預設:viewprot-fit:contain;頁內容顯示在safe area內
#cover viewport-fit:cover,頁面內容充滿螢幕
viewport-fit meta標籤設定(cover時)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
3.2 css constant()函數與safe-area-inset-top &safe-area-inset-left &safe-area- inset-right &safe-area-inset-bottom的介紹
如如上圖所示在iOS 11中的WebKit包含了一個新的CSS函數constant(),以及一組四個預先定義的常數:safe -area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom。當合併一起使用時,允許樣式引用每個方面的安全區域的大小。
3.1當我們設定viewport-fit:contain,也就是預設的時候;設定safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe- area-inset-bottom等參數時不起作用的。
3.2當我們設定viewport-fit:cover時:設定如下
body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constant(safe-area-inset-right); //如果未竖屏时为0 padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px }
4. iPhoneX的適配---高度統計
viewport-fit:cover + 導航欄
5.iPhoneX的適配---媒體查詢
#注意這裡採用的是690px(safe area高度),不是812px;
@media only screen and (width: 375px) and (height: 690px){ body { background: blue; } }
6.iphoneX viewport-fit
問題總結
1.關於iphoneX 頁面使用了漸層時;如果viewport-fit:cover;
1.1在設定了背景色單色和漸層色的區別,如果是單色時會填充整個螢幕,如果設定了漸變色那麼只會更加子元素的高度去渲染;而且頁面的高度只有690px高度,上面使用了padding-top :88px;
body固定為:
<body><div class="content">this is subElement</div></body>
1.單色時:
* { padding: 0; margin: 0; } body { background:green; padding-top: constant(safe-area-inset-top); //88px /*padding-left: constant(safe-area-inset-left);*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }
2.漸層色
* { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); padding-top: constant(safe-area-inset-top); //88px /*padding-left: constant(safe-area-inset-left);*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }
解決使用漸層色仍舊填充整個螢幕的方法;CSS設定如下
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> <title>Designing Websites for iPhone X: Respecting the safe areas</title> <style> * { padding: 0; margin: 0; } html, body { height: 100%; } body { padding-top: constant(safe-area-inset-top); padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); } .content { background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); width: 100%; height: 724px; } </style> </head> <body> <div class="content">this is subElement</div> </body> </html>
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是有關HTML5頁面在iPhoneX適配問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

iphone x max尺寸分别是屏幕为6.5英寸、高度为6.20英寸、宽度为3.05英寸、厚度为0.30英寸、重量为208克;iPhone XS Max有3种颜色可选,分别是银色、深空灰色和金色。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

iPhonex有nfc功能,nfc是一种无线通信技术,可以实现设备之间的短距离数据传输和交互,可以用于支付、近场通信等应用场景,可以使用苹果提供的Core NFC框架来实现nfc功能的读取和处理。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

禪工作室 13.0.1
強大的PHP整合開發環境

SublimeText3漢化版
中文版,非常好用

SublimeText3 Linux新版
SublimeText3 Linux最新版

記事本++7.3.1
好用且免費的程式碼編輯器

Dreamweaver CS6
視覺化網頁開發工具