....I've been to sites, where, if you're on a mobile device, it redirects you to say, m.site.com - how is this done? (the only knowledge *I* have regarding anything about this is "media queries" in CSS - and that doesn't explain the redirection....)


Thanks.

In article <88e1893c-1452-4f95-80d5-b1636c17bd2c@googlegroups.com>, bit-
naughty@hotmail.com says...
> 
> ...I've been to sites, where, if you're on a mobile device, it redirects you to say, m.site.com - how is this done? (the only knowledge *I* have regarding anything about this is "media queries" in CSS - and that doesn't explain the redirection....)
> 
> 
> Thanks.

It's done at the server.  The HTTP request sends details of the "user 
agent" (browser or equivalent) and platform (I believe).  The server is 
configured to redirect to an alternative page when the request seems to 
come from a smaller device.

-- 

Phil, London

On 12/01/2016 06:42 PM, bit-naughty@hotmail.com wrote:
> ...I've been to sites, where, if you're on a mobile device, it redirects you to say, m.site.com - how is this done? (the only knowledge *I* have regarding anything about this is "media queries" in CSS - and that doesn't explain the redirection....)
>
>
> Thanks.
>

Like Philip explained it is done server side. And it is a stupid thing 
to do that made sense up until about 10 years ago when phones had tiny 
low res screens. There is nothing more annoying than having a FHD or 
even UHD screen and then be redirected to a crippled mobile site.

I prefer a good responsive site but lacking that I will have a scaled 
version of a normal website instead of m.site.com. The ones that do not 
allow you to turn the redirect off with a cookie are the worst.

On Thu, 1 Dec 2016 09:42:13 -0800 (PST), bit-naughty@hotmail.com wrote:
> ....I've been to sites, where, if you're on a mobile device, it redirects
> you to say, m.site.com - how is this done? (the only knowledge *I* have
> regarding anything about this is "media queries" in CSS - and that
> doesn't explain the redirection....)
> 
> Thanks.

Not in CSS, but CSS media query.
In JavaScript, you'd use `window.matchMedia()` to test a media query.

<https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia>

e.g. redirect if on handheld devices.

  if (window.matchMedia("handheld")) {
    location.href = "https://m.thesite.com/";
  }

Do this at the very first script. Before any other inline/external scripts.

For the mobile site, use e.g.

  if (!window.matchMedia("handheld")) {
    location.href = "https://www.thesite.com/";
  }

i.e. it redirect to the non-mobile version of the site if the device is not
a handheld device. e.g. TV, computer monitor, etc.

See the available media types from:

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Pseudo-BNF>


Most sites uses HTTP level redirection using web server configuration or
server side script. But this may fail if the browser doesn't provide the
correct content types in the `Accept` HTTP request header. e.g. browsers
with additional privacy protection, or when privacy proxies is used (such as
Tor).

JJ wrote:

> On Thu, 1 Dec 2016 09:42:13 -0800 (PST), bit-naughty@hotmail.com wrote:
>> ....I've been to sites, where, if you're on a mobile device, it redirects
>> you to say, m.site.com - how is this done? (the only knowledge *I* have
>> regarding anything about this is "media queries" in CSS - and that
>> doesn't explain the redirection....)
>> 
>> Thanks.
> 
> Not in CSS, but CSS media query.

Different wording, same concept.

> In JavaScript, you'd use `window.matchMedia()` to test a media query.

But that is not how this should be done.
 
> <https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia>
> 
> e.g. redirect if on handheld devices.
> 
>   if (window.matchMedia("handheld")) {
>     location.href = "https://m.thesite.com/";
>   }
> 
> Do this at the very first script.

And annoy your visitors to no end :->

The proper way is to tell visitors with mobile devices that a mobile-
optimized version is available for them unless they have switched from the 
mobile-optimized version to the desktop-optimized version (which is possible 
e.g. in Mobile Chrome by simply checking a checkbox in the menu).

As an alternative, media queries can be used so that the stylesheet is 
adapted to the mobile device and no mobile-optimized version is necessary.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

On 01/12/2016 18:42, bit-naughty@hotmail.com wrote:
> ...I've been to sites, where, if you're on a mobile device, it
> redirects you to say, m.site.com - how is this done? (the only
> knowledge *I* have regarding anything about this is "media queries"
> in CSS - and that doesn't explain the redirection....)

I've been using this way:
http://zerosixthree.se/detecting-media-queries-with-javascript/

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/
https://www.aslint.org/ - Accessibility testing tool

Cezary Tomczyk wrote:

> On 01/12/2016 18:42, bit-naughty@hotmail.com wrote:
>> ...I've been to sites, where, if you're on a mobile device, it
>> redirects you to say, m.site.com - how is this done? (the only
>> knowledge *I* have regarding anything about this is "media queries"
>> in CSS - and that doesn't explain the redirection....)
> 
> I've been using this way:
> http://zerosixthree.se/detecting-media-queries-with-javascript/

Bad idea.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

On 04/12/2016 20:23, Thomas 'PointedEars' Lahn wrote:
> Cezary Tomczyk wrote:
>
>> On 01/12/2016 18:42, bit-naughty@hotmail.com wrote:
>>> ...I've been to sites, where, if you're on a mobile device, it
>>> redirects you to say, m.site.com - how is this done? (the only
>>> knowledge *I* have regarding anything about this is "media queries"
>>> in CSS - and that doesn't explain the redirection....)
>>
>> I've been using this way:
>> http://zerosixthree.se/detecting-media-queries-with-javascript/
>
> Bad idea.

Hm, interesting. What's wrong with that approach?

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/
https://www.aslint.org/ - Accessibility testing tool

Cezary Tomczyk wrote:

> On 04/12/2016 20:23, Thomas 'PointedEars' Lahn wrote:
>> Cezary Tomczyk wrote:
>>> On 01/12/2016 18:42, bit-naughty@hotmail.com wrote:
>>>> ...I've been to sites, where, if you're on a mobile device, it
>>>> redirects you to say, m.site.com - how is this done? (the only
>>>> knowledge *I* have regarding anything about this is "media queries"
>>>> in CSS - and that doesn't explain the redirection....)
>>> I've been using this way:
>>> http://zerosixthree.se/detecting-media-queries-with-javascript/
>> Bad idea.
> 
> Hm, interesting. What's wrong with that approach?

Put simply, it does not work where it is required, and it is error-prone 
overkill where it is not required.  Also, people could get the wrong idea of 
using the “innerHTML” property to replace or rewrite content, leaving parts 
of documents or whole documents unindexable while causing a user-unfriendly 
flash of content.

<https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes> pp.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.