windows-phone – WP8上的IE 10忽略了媒体查询?
我正在使用媒体查询的网站上工作.我可以在桌面浏览器中看到它们正常工作,但是当我导航到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> 正如您所看到的,它非常简单,有4个不同的“断点”,其中主体的背景颜色将根据不同的屏幕宽度而变化.在我的WP8设备(Lumia 822)上注意到它在IE中不起作用后,我开始在Google上搜索问题,这似乎是一个众所周知的问题.所以我找到并尝试过的解决方案来自这里: 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浏览器.我有两个问题: 首先 – 当我提醒我的用户代理字符串时,我从我的WP8设备获得以下内容:
根据上面的文章和this article,它应该是IEMobile / 10.0.关于为什么我的不同的任何想法?这似乎是Windows Phone 7用户代理字符串.为什么我的WP8设备会显示出来? 由于存在这种差异,我不得不将JS更改为匹配7.0而不是10,否则将永远不会满足if条件. 所以,即使如此,使用上面的代码,没有任何反应,我的屏幕在我的WP8设备上加载白色.谁能看到我做错了什么? 更新: 似乎JS抛出了一个错误:
所以我找到了解决方案,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更新(我通过开发程序):
所以,我再次尝试删除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 – 自动在桌面上的chrome中创建网站快捷方式
- windows-server-2008 – 管理组织中的笔记本电脑和台式机,并
- 在AD环境中自动配置Windows桌面和笔记本电脑以使用代理服务
- Windows XP x86检查构建?
- 使用Windows命令提示符(cmd.exe)的StackOverflow信誉
- Windows Phone模拟器错误 – 无法更改虚拟机的处理器
- Windows cmd中拒绝访问.为什么?
- 无法在Windows 10 Professional中安装自定义inf. Windows使
- windows – 任务调度程序不会终止任务
- windows – 控制台发出哔声字符代码 – 错误号码?
- Windows BAT或CMD:将一些数据发送到localhost u
- windows – 在哪里使用null BSTR记录?
- 如何清除Windows命令行中的最后一行?
- windows-xp – 如何告诉“Windows安全中心”我是
- 如何通知Windows服务(c#)的DB Table Change(sql
- windows-xp – Windows Vista配置文件了吗?
- windows – 无边框窗口.如何添加阴影并删除1px边
- windows – SwitchToThisWindow将当前窗口发送到
- windows – 带双引号参数的exec
- “反序列化错误” – 带SOCK的foreach / doSNOW