....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.
![]() |
0 |
![]() |
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
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |
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).
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |
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
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |
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
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |