iphone的移动视图问题

Posted 2023-05-06

【中文标题】iphone的移动视图问题

【英文标题】：Mobile view issues with iphones

【发布时间】：2020-12-05 03:10:09

【问题描述】：

我对 iphone 上的移动视图有疑问。在安卓设备上一切正常。我也试过为iphone xr设置具体的宽度和高度，但还是不行。

我已经在谷歌移动友好测试中测试了我的网站，一切正常。

这是我的代码，适用于最大宽度为 700px 的 android 设备：

body 
       background-image: url('/wp-content/uploads/2020/08/ass-1.png');
       background-repeat: no-repeat;
       background-position: center center;
       background-attachment: fixed;
       background-size: cover;
      
   
   
   @media screen and (max-width: 700px)  
 body 
   background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
     background-position: fixed;
     background-repeat: no-repeat;
     background-size: cover;
 

【参考方案1】：

iPhone XR 分辨率为max-width:414px

更多信息：https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/

@media screen and (min-width: 414px)  
 body 
   background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
     background-position: fixed;
     background-repeat: no-repeat;
     background-size: cover;
 

【讨论】：

也就是说我也必须为XR添加一个代码？还是只改第一个？

@media screen and (min-width: 414) 使用这个这只需要所有的设备 min-width=414,, 。更多信息：responsivedesign.is/develop/browser-feature-support/…

已更新答案替换为现有媒体查询..

还是不行 :( (-webkit-device-pixel-ratio: 3) 怎么样？我应该将它添加到“@media screen and (min-width: 414) and”吗？

现在检查 414 给它 414px