StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Well you can certainly make a list of common browser strings and create custom layouts for browsers most common on Android/iOS and serve those directly. (not preferred)</p> <p>However the generally preferred method is to use CSS media queries for responsive web. These queries look something like:</p> <pre><code>@media screen and (min-device-width:321px) { ... } @media screen and (min-width:769px) { ... } @media screen and (min-width:1025px) { ... } </code></pre> <p>And in those locations where it says <code>...</code> you can do custom classes/positioning/styling for all your elements. But Google is your friend in finding good tutorials for these.</p> <p>Also there are many CSS/JavaScript libraries out there to create good buttons/layouts for mobile devices. These libraries often take into account that the touch areas for buttons need to be larger then the visible area, that there is enough spacing between elements. Often they also include "mobile" widgets, e.g. fancy dialog selectors that pop open and look just like the native popups on iOS or Android. Once again Google will be your friend.</p> <p>If however you find yourself forced to do browser string comparisons don't expect your guess at the device to be correct. Browser strings are quite tricky and don't reveal a lot of information of the device. E.g. you may have no idea if the visitor is using Chrome for Android on a tablet or a smartphone. You can use browser strings to determine if the user is on Android or iOS for instance. But for Android don't expect to be able to identify all possible screensizes/devices on the market from the browserstrings.</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