Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31755 > unrolled thread

Redirecting to a mobile site

Back to article view | Back to comp.lang.javascript

Contents

  Redirecting to a mobile site bit-naughty@hotmail.com - 2016-12-01 09:42 -0800
    Re: Redirecting to a mobile site Philip Herlihy <thiswillbounceback@you.com> - 2016-12-01 19:46 +0000
    Re: Redirecting to a mobile site Silvio <silvio@internet.com> - 2016-12-01 23:31 +0100
    Re: Redirecting to a mobile site JJ <jj4public@vfemail.net> - 2016-12-02 22:38 +0700
      Re: Redirecting to a mobile site Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-12-02 16:46 +0100
    Re: Redirecting to a mobile site Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-12-03 11:35 +0100
      Re: Redirecting to a mobile site Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-12-04 20:23 +0100
        Re: Redirecting to a mobile site Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-12-05 07:38 +0100
          Re: Redirecting to a mobile site Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-12-05 13:16 +0100

#31755 — Redirecting to a mobile site

...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.

[toc] | [next] | [standalone]

#31757

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

[toc] | [prev] | [next] | [standalone]

#31760

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.

[toc] | [prev] | [next] | [standalone]

#31761

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).

[toc] | [prev] | [next] | [standalone]

#31762

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.

[toc] | [prev] | [next] | [standalone]

#31765

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

[toc] | [prev] | [next] | [standalone]

#31766

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.

[toc] | [prev] | [next] | [standalone]

#31767

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

[toc] | [prev] | [next] | [standalone]

#31768

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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web