日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配

發布時間:2023/12/31 编程问答 47 豆豆
生活随笔 收集整理的這篇文章主要介紹了 [转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基礎知識

1. 關于iphoneX 、iphoneXS、iphoneXSMax、iphoneXR機型的大小和像素

機型尺寸
注意:開發人員只需要記住開發尺寸

?

2. 屏幕組成
齊劉海(44px) + 安全區域 + 手勢區域(34px)

屏幕組成

?

適配方案 1. viewport-fitviewport-fit="contain"展示區域在安全區中,不包括齊劉海和底部手勢區域 viewport-fit="cover"展示區域整個屏幕中,包括齊劉海和底部手勢區域 所以使用viewport-fit="contain"就可以解決適配問題,將下面的代碼放在<head>標簽中。 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">2. css媒體查詢X、XS機型的媒體查詢 /* x xs */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {// iphoneX iphoneXS樣式 } XR機型媒體查詢 /* xr */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {// iphoneXR樣式 } XS MAX機型媒體查詢 /* xs max */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {// iphoneXR樣式 } 3. js判斷 通過window.navigator.userAgent、window.devicePixelRatio、window.screen三個屬性來匹配X、XS機型js檢查 let isIphoneX = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812)XR機型js檢查 let isIphoneXr = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896)XS MAX機型js檢查 let isIphoneXsMax = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896)

?

?

轉載于:https://www.cnblogs.com/chris-oil/p/10753861.html

總結

以上是生活随笔為你收集整理的[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。

主站蜘蛛池模板: 国产精品伦一区二区三区免费看 | 国产小视频你懂的 | 大色综合 | 久久一区二区三区四区 | 国产丝袜美腿一区二区三区 | 青青视频免费看 | 日本精品网站 | 欧美中文字幕在线观看 | 欧美日韩一区二区综合 | 性史性dvd影片农村毛片 | 91视频首页 | 中国在线观看免费视频 | 岛国av一区二区 | 国产一区二区三区免费看 | 欧美日韩国产一区二区 | 三级视频在线 | 午夜国产视频 | 狠狠躁18三区二区一区传媒剧情 | av色先锋 | 成年人毛片 | 久久92 | 天天操穴 | 爱福利视频广场 | 亚洲一级一区 | 国产第四页 | 久久久久久国产精品免费免费 | 2021天天干 | 国产良妇出轨视频在线观看 | 国语av| 无码一区二区三区免费 | 伊人久久成人网 | 亚洲综合第一页 | 樱花草涩涩www在线播放 | 国产夜色视频 | 成人免费性生活视频 | 一级片在线免费观看 | 亚洲伦理精品 | 久操久操 | 91精品国产一区二区三区蜜臀 | 久草热播 | 国产一区激情 | 一边摸一边做爽的视频17国产 | 人人插人人澡 | 第一av在线 | 亚洲成人自拍偷拍 | 韩国美女福利视频 | 国产欧美一区在线观看 | 久久精视频 | 欧美a网站 | 中文字幕制服诱惑 | 日韩欧美一级片 | 成人在线免费高清视频 | 91黄色在线视频 | 中国一区二区视频 | 美女扒开粉嫩尿口 | 99在线观看免费视频 | 亚洲天堂高清 | 美女视频免费在线观看 | 午夜成人免费视频 | 性高潮久久久久 | 美国一级片网站 | 亚洲一区二区三区电影 | 午夜美女网站 | 污网在线看 | ass大乳尤物肉体pics | 亚洲av无码日韩精品影片 | 天天干天天操天天爱 | 五月天爱爱 | 青青青av| 成人在线视频免费看 | 日本人妖xxxx | 老司机深夜福利视频 | 国产日韩中文字幕 | 都市激情自拍 | av天天有 | 黄色天堂av | 国产乱码精品一区二区三区亚洲人 | 中文字幕一区二 | 99久久精品免费看国产免费软件 | 精品人妻一区二区免费视频 | 叶全真三级 | 亚洲三级视频在线观看 | 亚洲AV无码久久精品国产一区 | 亚洲一区二区免费电影 | 欧美三级网站 | 中文字幕一区二区三区四区不卡 | 女人扒开屁股让男人捅 | 五月婷婷一区二区三区 | 欧美日在线 | 欧美激情免费看 | 青娱乐毛片 | 3d动漫精品啪啪一区二区竹菊 | 精品人妻少妇一区二区三区 | 国产精品原创 | jizz网站| 极品熟妇大蝴蝶20p 国产偷自拍视频 | 性一交一乱一透一a级 | 欧美一区二区三区免费在线观看 | 情欲少妇人妻100篇 黄色一级片欧美 |