iPhone X

Question

与Apple的新设备相对应的CSS媒体查询是什么？我需要设置<div id="header"> <h1>abcr design</h1> <div id="options"> <div id="o2"><a href="#">Histórico</a></div> <div id="o1"><a href="styletest.php">Tracking</a></div> </div> </div>的{{1}}来更改X的安全区域背景颜色。

Answer 1

iPhone X

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

iPhone 8

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

iPhone 8 Plus

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

iPhone 6 + / 6s + / 7 + / 8 +共享相同的尺寸，而iPhone 7/8也有。

寻找特定的方向？

<强>肖像

添加以下规则：

    and (orientation : portrait)

<强>风景

添加以下规则：

    and (orientation : landscape)

参考文献：

Answer 2

以下是针对iphone的以下一些媒体查询。这是参考链接https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

    /* iphone 3 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

    /* iphone 4 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 5 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6, 6s, 7, 8 */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6+, 6s+, 7+, 8+ */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone X */
    @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

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

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

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

Answer 3

我注意到这里使用的答案是：device-width，device-height，min-device-width，min-device-height，max-device-width，max-device-height。

已弃用，请不要使用它们。参见MDN for reference。而是使用常规的min-width，max-width等。为了进一步保证，您可以将最小值和最大值设置为相同的px值。例如：

iPhone X

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

您可能还会注意到，我使用的是635px的高度。自己尝试，窗口高度实际上是635px。运行适用于iPhone X的iOS模拟器，并在Safari Web检查器中执行window.innerHeight。以下是有关此主题的一些有用链接：

Answer 4

似乎最准确（且无缝）的方法是使用env（）为iPhone X / 8添加填充...

const express = require('express');
const fs = require('fs');
const app =  new express.Router();

var logger = require('./app').Logger;

app.use((req, res, next) => {
// write your logging code here.
 fs.send(logs.csv)
logger.info(console.log);
 next();
});

这里是描述此链接：

https://css-tricks.com/the-notch-and-css/

Answer 5

如果您的页面的DOM中缺少meta[@name="viewport"]元素，则可以使用以下内容来检测移动设备：

@media only screen and (width: 980px), (hover: none) { … }

如果要避免像所有移动浏览器一样将视口设置为980px的台式机避免误报，则还可以在组合中添加device-width测试：

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

根据https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries处的列表，新的hover属性似乎是检测您是否拥有无法正常运行的移动设备的最后一种新方法{{1 }};它仅在2018年才在Firefox 64（2018）中引入，尽管自2016年以来一直受Android Chrome 50（2016）甚至从2014年以来受Chrome 38（2014）的支持：

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

iPhone X / 8/8 Plus CSS媒体查询

5 个答案:

iPhone X

iPhone 8

iPhone 8 Plus