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
Space Between Buttons with Bootstrap Class
How to Collapse/Expand a Div Within an Email? What Clients Support This
Make Flex Item Wrap to the Next Row with Following Items Continuing the Flow
Aligning Elements in Last Flexbox Row
How to Select an Element That Has an Id Which Begins with a Digit
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible
How Would I Remove the Gap Between the Image and the Bootstrap Nav Bar
Rectangles Instead of Whitespace in Chrome
Z-Index Without Absolute Position
Css: Why Background-Color Breaks/Removes the Box-Shadow
Google Chrome - Rendering Differences When Zooming In/Out
Hidden Radio Button But Box Around It in IE8
Is Google.Loader.Clientlocation Still Supported
Crop Image Sides as Browser Width Decreases in Bootstrap Carousel
Ios7 Font Size Change When Create Nsattributedstring from HTML