CSS to Target Windows Phone 7

CSS to target Windows Phone 7

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.

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

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 media query to target Windows Phone Nokia Lumia

Thanks Zitscher for your inputs.
But I found a hack that worked for me
http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/
(this may be helpful to someone)

@media screen and (-ms-high-contrast: active) and (max-width: 30em),
(-ms-high-contrast: none) and (max-width: 30em) {
width: 130px !important;
padding-left:18px !important;
}

This is what I was looking for.
Thanks for your help.

windows 7 mobile css media query

See http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx

Is there a way to target Windows Mobile 7.5 browser using conditional comments?

may be this work for you

<!--[if IEMobile]>
...
<![endif]-->

Media Query to Target ONLY Mobile

Found the solution: https://stackoverflow.com/a/18500871/5906166

You need to include this in your header:

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

Explanation:

Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.



Related Topics



Leave a reply



Submit