Html 媒体查询在iPhone上根本不起作用_Html_Css_Media Queries

Html 媒体查询在iPhone上根本不起作用

html css

Html 媒体查询在iPhone上根本不起作用,html,css,media-queries,Html,Css,Media Queries,我有一部iPhone11，试图访问我的网站，我指定了与使用媒体查询相关的元标记。然而，这似乎根本不起作用。我完全迷路了，这是我的代码： <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> ...

我有一部iPhone11，试图访问我的网站，我指定了与使用媒体查询相关的元标记。然而，这似乎根本不起作用。我完全迷路了，这是我的代码：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    ...
    <link rel="stylesheet" href="assets/css/main.css" />
    ...
</head>

iPhone在处理CSS像素和设备像素方面是非标准的。您的屏幕宽度可能与您假设的不同。您可以获取当前屏幕宽度并检查其是否在应用范围内。

var w=window.innerWidth；
var h=窗内高度；
var x=document.getElementById（“数据”）；
x、 innerHTML=“浏览器宽度：“+w+”，高度：“+h+”



@media only screen and (max-width: 950px) and (min-width: 751px) {
  .main-content {
    margin-top: -200px !important;
  }
}

@media only screen and (max-width: 750px) {
  .main-content {
    margin-top: 0px !important;
    width: 100% !important;
  }
}