日本国产亚洲-日本国产一区-日本国产一区二区三区-日本韩国欧美一区-日本韩国欧美在线-日本韩国欧美在线观看

當前位置:雨林木風下載站 > 蘋果教程教程 > 詳細頁面

JavaScript 判斷iPhone X Series機型的辦法_javascript技巧

JavaScript 判斷iPhone X Series機型的辦法_javascript技巧

更新時間:2024-04-09 文章作者:未知 信息來源:網(wǎng)絡(luò) 閱讀次數(shù):

導(dǎo)寫在前面如果有更優(yōu)雅的方式,一定要告訴我!現(xiàn)狀iPhone X 底部是需要預(yù)留 34px 的安全距離,需要在代碼中進行兼容。現(xiàn)狀對于 iPhone X 的判斷基本是這樣的:// h5export c...

寫在前面

如果有更優(yōu)雅的方式,一定要告訴我!

現(xiàn)狀

iPhone X 底部是需要預(yù)留 34px 的安全距離,需要在代碼中進行兼容。

現(xiàn)狀對于 iPhone X 的判斷基本是這樣的:

// h5
export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.screen.width === 375);

這在之前是沒問題的,新的 iPhone X Series 設(shè)備發(fā)布之后,這個就會兼容就有問題。

iPhone X Series 參數(shù)

機型 倍率 分辨率 pt
iPhone X 3 2436 × 1125 812 × 375
iPhone XS 3 2436 × 1125 812 × 375
iPhone XS Max 3 2688 × 1242 896 × 414
iPhone XR 2 1792 × 828 896 × 414

width === 375 && height === 812 只能識別出 iPhone X 和 iPhone XS,對于 iPhone XS Max 和 iPhone XR 就無能為力了。

解決方法

對每個機型進行判斷

const isIphonex = () => {
 // X XS, XS Max, XR
 const xSeriesConfig = [
 {
  devicePixelRatio: 3,
  width: 375,
  height: 812,
 },
 {
  devicePixelRatio: 3,
  width: 414,
  height: 896,
 },
 {
  devicePixelRatio: 2,
  width: 414,
  height: 896,
 },
 ];
 // h5
 if (typeof window !== 'undefined' && window) {
 const isIOS = /iphone/gi.test(window.navigator.userAgent);
 if (!isIOS) return false;
 const { devicePixelRatio, screen } = window;
 const { width, height } = screen;
 return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
 }
 return false;
}

統(tǒng)一處理方法

因為現(xiàn)在 iPhone 在 iPhone X 之后的機型都需要適配,所以可以對 X 以后的機型統(tǒng)一處理,我們可以認為這系列手機的特征是 ios + 長臉。

在 H5 上可以簡單處理。

const isIphonex = () => {
 if (typeof window !== 'undefined' && window) {
 return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
 }
 return false;
};

媒體查詢

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
}

媒體查詢無法識別是不是 iOS,還得加一層 JS 判斷,否則可能會誤判一些安卓機。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持本站。

您可能感興趣的文章:
  • 解析JavaScript的ES6版本中的解構(gòu)賦值
  • 談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長
  • JavaScript中的回調(diào)函數(shù)實例講解
  • JavaScript變量提升和嚴格模式實例分析
  • JavaScript私有變量實例詳解
  • 使用javascript做時間倒數(shù)讀秒功能的實例
  • javascript json字符串到j(luò)son對象轉(zhuǎn)義問題
  • 使用JavaScript保存文本文件到本地的兩種方法
  • JavaScript中的"=、==、==="區(qū)別講解
  • JavaScript之解構(gòu)賦值的理解


溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統(tǒng)下載排行

主站蜘蛛池模板: 青青热久久国产久精品 | 19+韩国女主播激情vip视频在线 | 亚洲精品久久久久久小说 | 亚洲精品字幕一区二区三区 | 国产亚洲精彩视频 | 亚洲精品久久99久久一区 | 2021久久精品永久免费 | 日本高清免费在线观看 | 午夜视频网| 国产禁女女网站免费看 | 99精品视频一区在线视频免费观看 | 狠狠色狠狠色综合久久第一次 | 亚洲欧美日韩精品一区 | 久久亚洲国产午夜精品理论片 | 日韩欧美综合在线 | 久久久久国产精品四虎 | 在线看中文字幕 | 国产极品白嫩精品 | 中文字幕有码热在线视频 | 夜夜爽夜夜操 | 欧美黄色高清视频 | 欧美成人精品第一区首页 | 日日摸夜夜添夜夜添毛片 | 伊人网址| 日韩在线手机看片免费看 | 精品日韩在线视频一区二区三区 | 国产a级一级久久毛片 | 九九视频在线观看视频6偷拍 | 久久无码精品一区二区三区 | 欧美成人免费午夜全 | 久久伊人网站 | 国产日本在线 | 九九热视频这里只有精品 | 成年人免费网站在线观看 | 中文字幕手机在线观看 | 久久免费99精品久久久久久 | 亚洲精品一区91 | 国产成人精品999在线 | 国产91会所洗浴女技师按摩 | 天堂男人在线 | 天天碰夜夜 |