CSS 以 Windows Phone 7 为目标 [英] CSS to target Windows Phone 7
问题描述
我正在尝试添加一个针对 Windows Mobile 的 .css 文件，由于 media="handheld" 对该设备没有任何作用，我已按照 Windows Phone 官方网站，其中总结一下:
I'm trying to add a .css file that targets Windows Mobile, and as media="handheld" does nothing for this device I've followed instructions from an official Windows Phone site, which sum up to this:
<!--[if IEMobile 7]>
<p>Welcome to Internet Explorer Mobile.</p>
<![endif]-->
<![if !IEMobile 7]>
<p>All other browsers</p>
<![endif]>
<小时>
问题
正如预期的那样，在 Firefox 和桌面版 Internet Explorer 中，这会显示应有的内容:所有其他浏览器".
The Problem
As expected, in Firefox and desktop version of Internet Explorer this displays what it should: "All other browsers".
不幸的是，我的 Windows Phone 7 还显示所有其他浏览器".我尝试在条件注释中使用和不使用7"，结果相同.
Unfortunately, my Windows Phone 7 also displays "All other browsers". I tried with and without "7" in the conditional comment, same result.
我的 .html 中没有其他内容可能会导致问题，因为我正在对此进行测试:
There is nothing else in my .html that could be causing problems, because I'm testing on this:
<html>
<body>
<p>Does work</p>
<!--[if IEMobile 7]>
<p>Welcome to Internet Explorer Mobile.</p>
<![endif]-->
<![if !IEMobile 7]>
<p>All other browsers</p>
<![endif]>
</body>
</html>
在线版本暂时在这里.
我从官方网站复制粘贴了代码，我在 WP7 上的 Internet Explorer 设置将移动版本指定为首选版本.我也有那个 Mango 更新.
I copy pasted the code from the official site, and my Internet Explorer settings on WP7 specifies Mobile Version as preferred version. I also have that Mango update.
在 perishablepress.com 文章中，我'我读过在普通的非手持样式表声明上指定 media="Screen"(大写 S)将强制 WP7 使用 media="handheld" 声明，但是这对我不起作用.
In an perishablepress.com article I've read that specifying media="Screen" (capitalizing the S) on a normal, non-handheld stylesheet declaration will force WP7 to use the media="handheld" declaration, however this didn't work for me.
有没有人有使用 .css 定位 WP7 的经验?如果是，您的解决方案是什么?
Does anyone have experience with targeting WP7 with a .css? If yes, what is your solution?
请记住，我真正在寻找如何让WP7选择.css的移动版本，而不是如何解决条件评论问题.感谢您的时间！
Bear in mind that I'm really looking for how to make WP7 select a mobile version of the .css, not how to solve the conditional comment problem. Thank you for your time!
我添加了一个 javascript(谢谢 w3schools.com)来询问浏览器信息(使用导航器")，这就是我为我的设备(三星 Omnia，顺便说一句)得到的:
I've added a javascript (thank you w3schools.com) to ask for the browser information (with 'navigator'), this is what I get for my device (Samsung Omnia, btw):
Does work
All other browsers
Browser CodeName: Mozilla
Browser Name: Microsoft Internet Explorer
Browser Version: 5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; SAMSUNG; OMNIA7)
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; SAMSUNG; OMNIA7)
推荐答案
Mango 运行 IE9，而不是 IE7.您的支票显示，如果不是 IEMobile 7，则显示所有其他浏览器".由于浏览器是IE9，所以显示所有其他浏览器.
Mango runs IE9, not IE7. Your check says, if not IEMobile 7, display 'All other browsers'. Since the browser is IE9, All other browsers is displayed.
编辑 - 您可以尝试使用 Javascript 来检测它.我从这里改编了这段代码.
Edit - You could try using Javascript to detect it. I adapted this code from here.
browserUA = navigator.userAgent.toLowerCase();
if (browserUA.search('windows phone os 7') > -1)
//windows phone therefore load WP CSS file
else
//it's some other browser
当然，用户代理可以轻松更改，因此出于安全原因不要使用此方法.但是，对于 Windows Phone 检测，它应该可以工作.
Of course, user-agents can be changed easily so don't use this method for security reasons. However, for Windows Phone detection, it should work.
这篇关于CSS 以 Windows Phone 7 为目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
