Fatal编程技术网
  • html/
  • Html 视口元标记和移动样式表被浏览器完全忽略。为什么会这样？

Html 视口元标记和移动样式表被浏览器完全忽略。为什么会这样？

html css mobile

Html 视口元标记和移动样式表被浏览器完全忽略。为什么会这样？,html,css,mobile,viewport,meta-tags,Html,Css,Mobile,Viewport,Meta Tags,我正在尝试设置一个网站，以便它使用一个viewport meta标记使页面最初一直缩小，然后使用一个单独的样式表来呈现移动页面。这应该是可行的，但不会在任何我尝试它呈现。我做错了什么？我试着把链接和元标签放在头部的不同位置，但没有什么不同。它通过w3c验证器进行良好的验证 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

我正在尝试设置一个网站，以便它使用一个viewport meta标记使页面最初一直缩小，然后使用一个单独的样式表来呈现移动页面。这应该是可行的，但不会在任何我尝试它呈现。我做错了什么？我试着把链接和元标签放在头部的不同位置，但没有什么不同。它通过w3c验证器进行良好的验证

代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>

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

    <title>Website</title>

    <link href="mobile.css" rel="sylesheet" media="only screen and (max-device-width: 480px)">
    <link href="desktop.css" rel="stylesheet" media="screen">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>


网站
哪个手机浏览器？你确定你的设备的宽度是480px或更小吗？是的，我甚至试过1px，但还是没有。Firefox mobile，opera mobile，默认android浏览器。尝试将mobile.css放在desktop.css之后。。可能只是风格上的一个优先问题。很难说这是不是你的问题的原因，就像布莱克说的。作为额外的预防措施，您可以为桌面CSS的媒体查询添加
min device width
。顺便说一句，这并没有帮助，但我相信目前的共识是只使用一个CSS文件，并将所有媒体查询放在其中，而不是使用多个链接。