搜尋
首頁web前端H5教程有關HTML5頁面在iPhoneX適配問題

這次為大家帶來有關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中文網其它相關文章!

相關閱讀:

html可輸入下拉式選單應該如何寫

#插入表單時怎樣處理form上下空出一行

以上是有關HTML5頁面在iPhoneX適配問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

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

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

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

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

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

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

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

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

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

iphone x max尺寸是多少iphone x max尺寸是多少Nov 30, 2022 am 11:07 AM

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

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

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

iphonex有nfc功能吗iphonex有nfc功能吗Aug 11, 2023 pm 03:05 PM

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

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具