I was looking into this a few years back. In short, you can’t do this with 100% reliability. There seem to be 2 approaches commonly used to provide a ‘best-guess’: 1. User Agent Detection This is where you check what the client is claiming to be. e.g. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // is mobile.. … Read more
CSS to detect screen orientation: @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation
use double @@ symbols. That will escape @ symbol and render @media correctly on client side
Here is what W3C has to say about this: The media attribute says which media the resource applies to. The value must be a valid media query. […] However, if the link is an external resource link, then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute’s … Read more
@Andy is right, double check your device-widths, or you could always just use min-width so you don’t have to know every device width. Regardless make sure you have a viewport tag, like <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>.
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword: @media all and (max-width:480px) { /* Styles */ } Edit: Combine rules with or: @media all and (prop1:val1), all and (prop2:val2) { /* Styles */ } Combine rules with and: @media all and … Read more
I am a newbie on android and CSS. I resolved the android not giving they real size with one line in the header of my index.html file: <meta name=”viewport” content=”width=device-width” /> From then on, my CSS files did what I expected!
According to this test: If you want only the desktop version of the image to be downloaded on the desktop… and only the mobile image to be downloaded on the mobile device – You need to use a min-width declaration to specify a minimum browser width for the desktop image… and a max-width for the … Read more
try that kind of code @import url(“/inc/Styles/full.css”) (min-width: 940px);
In the future please add code you’ve tried. if it’s an image tag you can use a class. Hide the second image on page load and show + hide image 1 at a certain screen size like so: HTML <img src=”image.jpg” class=”image1″/> <img src=”image.jpg” class=”image2″/> CSS .image2{ display: none; } @media only screen and (max-width: … Read more