windows-phone - WP8 上的 IE 10 忽略媒体查询？-6ren

windows-phone - WP8 上的 IE 10 忽略媒体查询？

转载作者：行者123 更新时间：2023-12-01 02:21:29

26

4

我正在一个使用媒体查询的网站上工作。我可以在我的桌面浏览器中看到它们工作正常，但是当我在 WP8 设备上导航到该站点时，没有加载任何 CSS。我创建了一个非常简单的 HTML 页面来复制问题并显示我尝试过的解决方案，但无法开始工作。

这是整个代码:

<html>
    <head>
        <title>WP8 Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <style type="text/css">

            @-webkit-viewport{width:device-width}
            @-moz-viewport{width:device-width}
            @-ms-viewport{width:device-width}
            @-o-viewport{width:device-width}
            @viewport{width:device-width}

            @media screen and (min-width: 1024px) {
                body {
                    background-color: red;
                }
            }

            @media screen and (min-width: 768px) and (max-width: 1024px) {
                body {
                    background-color: blue;
                }
            }

            @media screen and (min-width: 480px) and (max-width: 768px) {
                body {
                    background-color: green;
                }
            }

            @media screen and (max-width: 480px) {
                body {
                    background-color: yellow;
                }
            }

        </style>

        <script type="text/javascript">

            if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
                var msViewportStyle = document.createElement("style");
                msViewportStyle.appendChild(
                    document.createTextNode(
                        "@-ms-viewport{width:auto!important}"
                    )
                );
                document.getElementsByTagName("head")[0].
                    appendChild(msViewportStyle);
            }

        </script>

    </head>
    <body>
        text
    </body>
</html>

如您所见，这很简单， body 有 4 个不同的“断点”。的背景颜色会随着不同的屏幕宽度而改变。在注意到它在我的 WP8 设备(Lumia 822)上的 IE 中无法正常工作后，我开始在谷歌上搜索这个问题，这似乎是一个众所周知的问题。所以我找到并尝试过的解决方案来自这里:

http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

看起来很简单，因为我在 CSS 的顶部添加了五行:

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

然后添加一些JS从UA检测IE Mobile浏览器。我有两个问题:

首先-当我 alert我的用户代理字符串，我从我的 WP8 设备得到以下信息:

Mozilla/4.0 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822

根据上面的文章，和 this article ，它应该是 IEMobile/10.0 。关于为什么我的不同的任何想法？这似乎是 Windows Phone 7 用户代理字符串 .为什么我的 WP8 设备会显示这个？

由于这种差异，我不得不将 JS 更改为匹配 7.0 而不是 10，否则 if条件永远不会满足。

所以，即便如此，使用上面的代码，什么也没有发生，我的屏幕在我的 WP8 设备上加载为白色。谁能看到我做错了什么？

更新:

JS似乎抛出了一个错误:

Unexpected call to method or property access

所以我找到了一个解决方案， here :

if (navigator.userAgent.match(/IEMobile\/7\.0/)) { 
   var s = document.createElement("style");
   s.setAttribute('type', 'text/css');
   var cssText = "@-ms-viewport{width:auto!important}";
   if(s.styleSheet) { // IE does it this way
    s.styleSheet.cssText = cssText
   } else { // everyone else does it this way
    s.appendChild(document.createTextNode(cssText));
   }

document.getElementsByTagName("head")[0].appendChild(s);
}

但是，即使现在代码成功执行，我的媒体查询仍然被忽略，我仍然看到一个白页加载。有任何想法吗？

更新 2:

我找到了另一篇文章， here (滚动到底部)，从 GDR3 更新开始(我有，通过开发程序):

Great news! Microsoft have fixed the viewport issue in WP8 Update 3 (GDR3).

Using device-width in a CSS @-ms-viewport rule now correctly renders pages at the device-width, instead of the resolution width.

因此，我再次尝试删除 Javascript，并将其仅添加到我的 CSS 顶部:

@-ms-viewport{
   width:device-width
}

但同样，没有 CSS 加载。

更新 3:

看来我的用户代理可能是正确的。当我在 WP8 设备上导航到 whatsmyuseragent.com 时，它会显示正确的 UA。当它报告不正确的站点时，可能与它是本地 IIS 8.0 站点有关？如果是这种情况，我是否无法从我的 Windows Phone 本地测试我的站点？有没有人这样做过？

最佳答案

看起来您现在已经使用 Bootstrap 对其进行了排序，但该站点可能出于某种原因进入 EmulateIE7(为了兼容性)。例如，如果您有 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，Lumia 似乎也可以处理这个问题。 IE7 不支持标签，当然还有媒体查询。

关于windows-phone - WP8 上的 IE 10 忽略媒体查询？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20181819/

26

4

0

文章推荐：使用分页集合时的 Angularjs promise 链

文章推荐： OCaml - 仿函数 - 如何使用？

文章推荐： javascript - 直接将 prop 变量添加到 React 子组件的方法

php - 使用 WP 类别帖子列表小部件动态显示特定类别 (WP/PHP)
我正在尝试在我正在处理的博客上使用类别帖子 (WP-CPL) 插件来按类别过滤“最近的帖子”。基本上，当有人点击博客上的类别名称时，我希望它显示该类别的帖子。这将通过 Life Is Simple 模
php - 如何为 wp 中的某些用户隐藏特定页面(来自 wp-admin)？
我的形象我只想为某些用户隐藏特定页面。 function remove_menus(){ // get current login user's role $roles = wp_g
php - 如何为 wp 中的某些用户隐藏特定页面(来自 wp-admin)？
我的形象我只想为某些用户隐藏特定页面。 function remove_menus(){ // get current login user's role $roles = wp_g
php - wp INNER JOIN 未在我的 wp 网站中获取正确的数据
我为我的 wp 网站创建了一个简单的脚本，我正在尝试从 2 个表的 wp 数据库中获取正确的数据，这是代码，当我显示“user_ref_id”列的结果重复多次时，这是代码 global $wpdb;
wordpress -/wp-admin/&/wp-login.php 重定向循环
我安装了一个名为 Hide My WP 的插件来更改网站结构，但考虑到我使用的是自定义主题，它破坏了一些功能。所以我手动从plugins文件夹中删除了插件，但是从那以后我就无法访问/wp-admin/
php - SimpleXML:添加 "xmlns:wp"属性仅添加 "wp"，为什么？
我试图从头开始创建 WXR 文件(WordPress eXtended Rss)。我的代码基于 XML/ wordpress生成的WXR文件并像这样开始: 我是这样开始的: $newxml =
wordpress - 将所有重定向到除 wp-admin 和 wp-json 之外的不同域
我想将所有页面重定向到 http://www.expample2.com除了 wp-admin 和 wp-json。例如，用户能够登录 http://www.example1.com/wp-admi
wordpress - wp-admin 或 wp-login.php 上的重定向循环
我使用 MAMP 在本地构建了一个快速的 WordPress 网站，然后将其 checkin SVN 存储库。然后我将其检查到我的开发服务器上。除了运行 search and replace too
json - 搜索端点中的 WP REST API(wp json)不返回完整数据
在搜索端点的 WP REST API (wp json) 中: https://www.example.com/wp-json/wp/v2/search?search=searchPhrase&_em
wordpress - NGINX 尾部斜杠但不包括 wp-json 和 wp-admin
我正在使用这个 NGINX 规则来强制 WordPress 网站的尾部斜杠: rewrite ^([^.]*[^/])$ $1/ permanent; 但是这个规则给 Gutenberg 和 wp-j
json - 搜索端点中的 WP REST API(wp json)不返回完整数据
在搜索端点的 WP REST API (wp json) 中: https://www.example.com/wp-json/wp/v2/search?search=searchPhrase&_em
wordpress - NGINX 尾部斜杠但不包括 wp-json 和 wp-admin
我正在使用这个 NGINX 规则来强制 WordPress 网站的尾部斜杠: rewrite ^([^.]*[^/])$ $1/ permanent; 但是这个规则给 Gutenberg 和 wp-j
wordpress - 如何防止用户访问 wp admin 和 wp-login.php？
我想限制所有用户访问 WordPress 网站登录。例如:假设我有 WordPress 网站域 example1.com，我想限制所有用户使用 example1.com/wp- 访问管理员登录adm
php - 我可以在 WP Super Cache 缓存的 WP 页面中包含动态内容吗？
尝试实现这里讨论的技术， http://z9.io/2013/10/21/shiny-new-dynamic-content-wp-super-cache/ 进入使用 Genesis 框架的站点。我想
javascript - WP 在单独的 PHP 文件中调用自定义 AJAX 请求(WP 查询)
我试图在位于我的 WP 主题文件夹内的 PHP 文件中调用自定义 AJAX 函数，但是我无法让它检索输出。我认为问题在于将 WP 查询链接到主 WP 文件？ $.ajax({ url: "../../
wordpress - 如何使用 wp-cli 调用从 wp-config.php 获取数据库名称？
我正在编写一个 perl 脚本，用于将 Wordpress 安装从一个地方迁移到另一个地方。在这项工作中，我需要使用 wp-cli 调用从 wp-config 文件中获取 wordpress 数据库名
php - WP Alchemy Meta Box 功能导致 wp-admin 在数据库传输后运行速度极其缓慢
我最近更改了我的 WordPress 网站上的目录。我导出了数据库，搜索并替换了旧 URL 为新 URL，然后重新导入。该网站的前端工作正常，但任何页面的后端都需要近 15 秒才能加载。从funct
mysql - 通过类似于 arg 的标签获取 wp 帖子 - wp db 查询
我使用下面的代码通过类似的单词标签获取帖子但不起作用 $query = " SELECT * FROM $wpdb->posts , $wpdb->terms
php - WP Multisite + SSL 在 wp-admin 上给出 404
我已经通过 DirectAdmin 在我的服务器上安装了 SSL 证书。这似乎运作良好。我已将 wp_*_options 表中的 url 更改为 https://mydomain.nl 等。突然我的
php - 禁用 wp-admin 到 wp-login 规范重定向(wordpress)
我正在建立一个网站，使用 wordpress+buddypress(最新版本)。在这个网站中，我有自己的自定义登录|注册|重置密码表单，我不想将它们链接到后端 wp-forms。我已经阻止了所有用

首页

博学

6Ren·AI

商城

windows-phone - WP8 上的 IE 10 忽略媒体查询？