Databases
StackOverflow2013
Postsdbo
POHow to apply CSS only on devices with screen size less than 5 inches?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to apply CSS only on devices with screen size less than 5 inches?
    text
    copied!<p>I am looking for a technique that will allow me to apply a certain CSS only if the current device (where my web-app runs) has a "small" screen – smaller than, say, 5 inches.</p> <p>Some notes to make my question more clear:</p> <ul> <li><p>It should not be based on screen resolution or density, because there are some tablets that have a small resolution and some smartphones that have a high resolution.</p></li> <li><p>It also should not depend on current browser's window size. If it's a desktop then the CSS should not be applied even if the window was made small.</p></li> <li><p>My web-app has two layouts. One is default and is optimized for desktops and tablets. Another layout is optimized for smartphones and should only be turned on on smartphones. </p></li> <li><p>In my case nothing can be done on server-side. Different domains for each variant are not an option.</p></li> </ul> <p>Thank you in advance!</p> <p><strong>Update</strong></p> <p>Here is a test page with my best try: <a href="http://jsbin.com/uXULOpe/2/" rel="nofollow">http://jsbin.com/uXULOpe/2/</a> </p> <p>For Samsung Galaxy Nexus i9250 (4,5" sreen) it enables wrong style (".pad")... For iPad and WindowsPhone it seems to be working. Android seems to be thinking that it's width is at least 8 inches.</p> <p>Source:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;M-Q test&lt;/title&gt; &lt;style&gt; .always, .desktop, .pad, .smart{ display: none; } .always{ display: inline-block; } @media only screen and (min-device-width : 10in) { .desktop{ display: inline-block; } } @media only screen and (min-device-width : 5in) and (max-device-width : 10in) { .pad{ display: inline-block; } } @media only screen and (max-device-width : 5in) { .smart{ display: inline-block; } } &lt;/style&gt; &lt;meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, maximum-scale=1.0; user-scalable=0;"/&gt; &lt;meta name="HandheldFriendly" content="true" /&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;Always: &lt;span class="always"&gt;x&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Desktop: &lt;span class="desktop"&gt;x&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Pad: &lt;span class="pad"&gt;x&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Smartphone: &lt;span class="smart"&gt;x&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload