媒体查询以区分Google Pixel 1/2与Google Pixel XL与Google Pixel 2 XL
媒体查询以区分Google Pixel 1/2与Google Pixel XL与Google Pixel 2 XL
提问于 2018-03-03 07:23:34
我正在写一个cordova应用程序，需要隔离这些谷歌手机来调整样式
考虑到这一点：
我正在努力区分任何一款Google Pixel手机。
@media only screen and (min-width: 411px) and (max-width: 731px) {
.myDiv{ background-color: blue; }
}这会在所有像素上触发-无论是在仿真器中还是在物理设备中
@media only screen and (min-width: 411px) and (-webkit-device-pixel-ratio: 3) {
.myDiv{ background-color: blue; }
}这在任何像素手机上都不会触发--不管是3像素还是4像素
@media screen and (device-width: 411px) and (device-height: 731px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2.6){
.myDiv{ background-color: blue;
}这也不会在任何像素手机上触发
我正在努力寻找甚至一个媒体查询，以孤立谷歌Pixel2XL-似乎什么都没有张贴-但手机已经推出了一段时间？
有没有人在这方面有什么收获？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-11-13 03:52:44
您可以使用Javascript获取设备的宽度、高度和pixel aspect ratio。
输出设备信息功能
function OutputDeviceInformation() {
let deviceWidth = window.screen.width;
let deviceHeight = window.screen.height;
let devicePixelAspectRation = window.devicePixelRatio;
console.log('Width: ' + deviceWidth);
console.log('Height: ' + deviceHeight);
console.log('Pixel Aspect Ratio: ' + devicePixelAspectRatio);
}Google Pixel 2 XL输出：
宽度: 412px
高度: 823px
像素纵横比: 3.5
针对Google Pixel 2 XL的媒体查询
/* Portrait */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: landscape) {
}
/* Target Portrait and Landscape */
@media screen
and (device-width: 412px)
and (device-height: 823px)
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: landscape) {
}Stack Overflow用户
发布于 2018-08-23 00:41:31
在Google Pixel XL上试试这个：
/*Google像素XL */‘@媒体屏幕和(设备宽度: 411px)和(设备高度: 823px){
}‘
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49078882
复制相关文章
相似问题
腾讯云开发者
