Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's generally much safer to check the browser's <strong>user-agent</strong>, as then you will know whether they are on an Android, iPhone, iPad, iPod, Nokia, ..., and you are given greater flexibility to direct the user from there. I use the following Javascript (probably borrowed from another source):</p> <pre><code> var isMobile = function() { console.log("Navigator: " + navigator.userAgent); return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent); }; </code></pre> <p>Screen width is an available technique. I usually see this used with <strong>CSS Media Queries</strong>, changing the content based on "device-width" and "device-height". E.g.</p> <pre><code> @media only screen and (max-device-width: 480px) { /* For small devices, just CSS */ } </code></pre> <p>To go with the technique of screen width / height, this is from <a href="https://developer.mozilla.org/en/DOM/window.screen.width" rel="noreferrer">Mozilla docs</a>:</p> <pre><code> // crude way to check that the screen is at 1024x768 if (window.screen.width &lt; 1000) { // resolution is below 10 x 7 window.location = 'm.mysite.com'; //for example } </code></pre> <p>Here is an in-depth <a href="http://cartoonized.net/cellphone-screen-resolution.php" rel="noreferrer">list of mobile screen resolutions</a>.</p> <p>A few caveats:</p> <ol> <li>If a user goes to <em>www.yoursite.com/events/15</em>, you are going to forward the user directly back to <em>m.yoursite.com</em>. This can be very frustrating when trying to visit a link on a mobile device. You should try to reconstruct the proper URL either by a Javascript library (see <a href="http://millermedeiros.github.com/crossroads.js/" rel="noreferrer">Crossroads.js</a>) or on the server using a redirect.</li> <li><p>As mobile devices get better at rendering and interaction, be aware that oftentimes users may prefer to see the original site instead of the mobile site, full stop. Try to provide a method back to the main site.</p> <p>Hope this all helps you suss out your solution!</p></li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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