/*适配苹果X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.header_nav {
top: 44px;
}
} /*适配苹果X smart Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
.header_nav {
top: 44px;
}
} /*适配苹果XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
.header_nav {
top: 44px;
}
} @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
.header_nav {
top: 44px;
}
} /*适配,6,7,8*/
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { } /*适配,6+,7+,8+*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { } /*适配,5*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) { } /*适配,4*/
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

使用js匹配处理

    // iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896; if(isIPhoneX || isIPhoneXSMax || isIPhoneXR){
alert("是新手机");
}else{
alert("否");
}

css样式匹配苹果个型号手机的更多相关文章

  1. Web前端开发基础 第四课(认识CSS样式)

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  2. CSS3学习笔记-1:CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. 26-[Boostrap]-全局css样式,组件,控件

    1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...

  5. 前端之css样式01

    选择器,css文本属性 CSS语法: 选择器 {属性1: 值1; 属性2: 值2} CSS放置的位置: 1. 直接写在标签里面,通过style属性来设置CSS样式 2. 在head标签里面通过styl ...

  6. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  7. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  8. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

  9. CSS样式快速入门

    CSS样式快速入门 前言 前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...

随机推荐

  1. if语句格式及流程

    if语句是条件判断功能 1. if 条件: if语句块 执行流程:判断条件是否为真. 如果真. 执行if语句块 2. if 条件: if语句块 else: else语句块 执行流程:判断条件是否为真. ...

  2. [HNOI2011]括号修复

    设\(nd[4]\) 0--多出来的右括号 1--多出来的左括号 2--取反后多出来的右括号 3--取反后多出来的左括号 这样一来 Swap: swap(0,3),swap(1,2),swap(sn[ ...

  3. [World Final 2016] Branch Assignment

    链接 PDF bzoj 先求出正置边和反置边时b+1到前b个点的最短路dis[0/1][x](x∈[1,b]), 令D[x]=dis[0][x]+dis[1][x] 然后分组后每个x对代价的贡献为D[ ...

  4. js-ES6学习笔记-函数的扩展

    1.ES6函数参数的默认值,直接写在参数定义的后面.参数变量是默认声明的,所以不能用let或const再次声明. function Point(x = 0, y = 0) { this.x = x; ...

  5. 【代码笔记】iOS-播放从网络上下载的语音

    代码: ViewController.m #import "ViewController.h" //录音 #import <AVFoundation/AVFoundation ...

  6. Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息(maven)

    Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息(maven) 本篇和 Spring 没有什么关系,只是学习 Spring,必备一些知识,所以放在这里了. 本篇内容: (1)M ...

  7. LeetCode题解之Find All Numbers Disappeared in an Array

    1.题目描述 2.问题分析 使的 A[i] = i+1 ,最后检查不满足这个条件的i+1 .即为缺失的值. 3.代码 vector<int> findDisappearedNumbers( ...

  8. SQLSERVER将数据移到另一个文件组之后清空文件组并删除文件组

    SQLSERVER将数据移到另一个文件组之后清空文件组并删除文件组 之前写过一篇文章:SQLSERVER将一个文件组的数据移动到另一个文件组 每个物理文件(数据文件)对应一个文件组的情况(一对一) 如 ...

  9. CSS| background_属性总结

    Property List 属性 描述 CSS background 在一个声明中设置所有的背景属性. 1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. ...

  10. MySQL: Connection Character Sets and Collations

    character_set_server collation_servercharacter_set_databasecollation_database character_set_clientch ...