Html 调整浏览器大小时，媒体查询在桌面上工作，但在移动设备上不工作_Html_Css

Html 调整浏览器大小时，媒体查询在桌面上工作，但在移动设备上不工作

html css

Html 调整浏览器大小时，媒体查询在桌面上工作，但在移动设备上不工作,html,css,Html,Css,我已经在文档的头部添加了meta标签，但是当我在iphone或ipad上加载网站时，它看起来仍然和桌面网站一样。你可以在www.thairapyexeter.co.uk上查看我的网站我的HTML： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Thairapy Ha

我已经在文档的头部添加了meta标签，但是当我在iphone或ipad上加载网站时，它看起来仍然和桌面网站一样。你可以在www.thairapyexeter.co.uk上查看我的网站

我的HTML：

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Thairapy Hair, Beauty + Barbers</title>

  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="css/menu.css" media="screen" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content = "width=device-width, initial-scale=1">

</head>

在代码之间检查此代码

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  /* please write one time in head section */
</head>

相反，只有媒体屏幕-媒体屏幕它缺少一个用于关闭媒体查询的

。

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  /* please write one time in head section */
</head>

/* small device code here */
@media (min-width: 480px){
  /* media code here */
  /* Mobile */
}    
@media (min-width: 750px){
  /* media code here */
  /* Mobile or tab */
}
@media (min-width: 960px){
  /* media code here */
  /* desktop or Ipad */
}    
@media (min-width: 1200px){
  /* media code here */
  /* desaktop */
}
@media (min-width: 1600px){
  /* media code here */
  /* desktop */
}    
@media (min-width: 1920px){
  /* media code here */
  /* desktop */
}