StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It is cheap but you can check for window.Touch and that will let you know that you are dealing with a touch screen. Even though you can have a touch screen that is a desktop the interface experience is the same then as a mobile.<BR><BR></p> <p>I use special media queries to detect instead the size of the screen and not the type of device<BR> <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow">http://www.w3.org/TR/css3-mediaqueries/</a> <BR> <a href="https://developer.mozilla.org/en/CSS/Media_queries" rel="nofollow">https://developer.mozilla.org/en/CSS/Media_queries</a> <BR><BR></p> <pre><code>@import url('./collect-p.css') only screen and (max-device-width: 1024px) and (orientation:portrait); @import url('./collect-l.css') only screen and (max-device-width: 1024px) and (orientation:landscape); @import url('./collect-l.css') only screen and (min-device-width: 1025px); </code></pre> <p>The first query will load a style sheet for an Ipad in portrait<BR>The 2nd query will load a style sheet for an Ipad in landscape<BR> The last query will load a style sheet for any thing else including a regular browser( In my case the layout I made for the tablet is also designed to work well with browsers but you can allways have a sheet just for the desktop)<BR><BR> I have to say Media Queries are confusing and it is made worse by a lot of the goofy designer blogs out there but they are with out doubt the way to go and will save you frig tons of work in the long run.</p>

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