运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

//iphoneX、iphoneXs

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

即: 设备屏幕可见宽度为375px，可见高度为812px及设备像素比为3

//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
}

//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
}

//横屏

@media all and (orientation : landscape) {

}

//竖屏

@media all and (orientation : portrait){

}

转载于:https://www.cnblogs.com/Miracle-ZLZ/p/10685228.html

运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏相关推荐

html 苹果xr媒体查询,运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX
//iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...
如何判断iPhoneX/iPhoneXR/iPhoneXs/iPhoneXsMax/iphone12系列机型
CGSize cuursize=[[UIScreen mainScreen] currentMode].size;if (CGSizeEqualToSize(CGSizeMake(1125, 2436 ...
是否有刘海的机型（iPhoneX iPhoneXR iPhoneXS iPhoneXSMax）适配判断
1.5.8(iPhoneX.iPhoneXs):1125x2436(375812) 2.6.1(iPhoneXR):828x1792(414896) 3.6.5(iPhoneXs Max):1242x ...
css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程
大家好,今天给大家分享的是css3 媒体查询方向:横屏竖屏教程,希望大家喜欢. 说道媒体查询,很多人会感觉陌生,但是对于做响应式开发的同学来说,那是再熟悉不过了. 结合CSS媒体查询,可以创建适应不同 ...
iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
html 苹果xr媒体查询,iPhone的CSS3媒体查询_html/css_WEB-ITnose
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等
一.定义使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 当 ...
css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad
/* 1.max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度. 2.max-width是目标显示区域的宽度,例如,浏览器宽度. 3.它是设备上物理像素和设备独立像素( ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...

运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏相关推荐

最新文章

热门文章