javascript - How do I make my responsive website honour "Request a desktop site" on mobiles? - Stack Overflow

admin管理员组

文章数量:1336613

I have a dynamic website (Java Servlet driven and pletely hand-coded) that is responsive. Because it is a scientific site returning tables of data, some of the options are not available at smaller viewport widths. However there may be users that prefer to struggle with the desktop site in order to access these options, and I wish to acmodate them.

My question is What is the simplest way to make this possible for users of mobiles, both iOS 10 and Android? This is provoked by the fact that “Request a desktop site” is not working for my site on iPhone 5 or 6 running Safari iOS 10 when it is working on a Chrome browser in Android v.6. I really cannot find out what iOS 10 is looking for when one selects this option.

Relevant details of responsive coding:

Head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

CSS stylesheet viewport sections:
@media screen and (max-width:800px)
@media screen and (max-width:700px)
@media screen and (max-width:625px)
@media screen and (max-width:500px)
@media screen and (max-width:400px)

My site uses vanilla Javascript — not JQuery or other frameworks, which I would prefer to avoid.

I have spent some time trying to Google this, but the discussions I have found relate to specific systems (WordPress and the like) and there is nothing on Apple’s Developers’ site in the Safari section.

I have a dynamic website (Java Servlet driven and pletely hand-coded) that is responsive. Because it is a scientific site returning tables of data, some of the options are not available at smaller viewport widths. However there may be users that prefer to struggle with the desktop site in order to access these options, and I wish to acmodate them.

My question is What is the simplest way to make this possible for users of mobiles, both iOS 10 and Android? This is provoked by the fact that “Request a desktop site” is not working for my site on iPhone 5 or 6 running Safari iOS 10 when it is working on a Chrome browser in Android v.6. I really cannot find out what iOS 10 is looking for when one selects this option.

Relevant details of responsive coding:

Head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

CSS stylesheet viewport sections:
@media screen and (max-width:800px)
@media screen and (max-width:700px)
@media screen and (max-width:625px)
@media screen and (max-width:500px)
@media screen and (max-width:400px)

My site uses vanilla Javascript — not JQuery or other frameworks, which I would prefer to avoid.

I have spent some time trying to Google this, but the discussions I have found relate to specific systems (WordPress and the like) and there is nothing on Apple’s Developers’ site in the Safari section.

• javascript
• ios
• css
• mobile-safari
• responsive

Share Improve this question Follow edited Dec 31, 2019 at 14:59 David asked Aug 10, 2017 at 20:09 DavidDavid 1,05011 gold badge1313 silver badges2323 bronze badges 2

• Just a side note, but you should include as much functionality as you possibly can on your mobile site and leave the desktop version for purely desktop users. – user3151675 Commented Aug 10, 2017 at 20:20
• @the4kman — Believe me, I have. Unlike other sites I run, analytics on the non-responsive precursor only 6% of users are on phones and practically none on tablets! The phone usage tends just to be in seminars — these guys carry laptops almost everywhere. What I am hiding primarily is links out to a non-responsive site containing our data but with impossible dimensions for the phone. However there are other links out to sites that users might wish to use. It's a very balanced thing that I have spent much time and HCI consideration on. – David Commented Aug 10, 2017 at 20:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Answering the Question Myself

So after looking at a few devices it seems that:

• Mobile Safari is looking for a separate (non-responsive) non-mobile site, assuming that it is on a specific mobile site.
• Chrome (but not Opera) on the Android running v.6 was trying to hack things, presumably by ignoring the @media screen statements.

However I found a javascript solution in:

D.Tipson’s responsive-request-desktop-site.js.

This works for me in mobile Safari on both iPhone 5 and 6 running iOS 10.3.3 and (two years later) an iPhone XS running iOS 13.3.

Addendum 31.12.2019

In response to a request for further details, all I did was add the following at the bottom of each web page, just before the </body> tag:

<script type="text/javascript"> 
(function(d){ 
function C(k){return(d.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2];} 
var ua = navigator.userAgent, 
ismobile = / mobile/i.test(ua),  
mgecko = !!( / gecko/i.test(ua) && / firefox\//i.test(ua)), 
wasmobile = C('wasmobile') === "was", 
desktopvp = 'user-scalable=yes, maximum-scale=2', 
el;  
if(ismobile && !wasmobile){ 
d.cookie = "wasmobile=was";  
} 
else if (!ismobile && wasmobile){ 
if (mgecko) { 
el = d.createElement('meta'); 
el.setAttribute('content',desktopvp); 
el.setAttribute('name','viewport'); 
d.getElementsByTagName('head')[0].appendChild( el ); 
}else{ 
d.getElementsByName('viewport')[0].setAttribute('content',desktopvp); 
} 
} 
}(document)); 
</script> 

My viewport tag was:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

You can test this at my FlyAtlas 2 site: choose Gene and then use the example gene, vkg. If you then change to the desktop version you get additional options to display standard deviations etc. in the table.

Note, also, that in iOS 13 the way that you invoke ‘Request Desktop Site’ on your phone has changed from previous versions. I haven’t checked Android recently.

In cases where you can request a PC version of the site, you are not really talking about a responsive site anymore. Before responsiveness was mon people used two websites. Typically a www. site and an m. site where the M site was formatted for mobile devices. If your phone detects an M site at a domain, it will default to it, and if you pick go to desktop version, you are leaving the M site to go to the primary site.

If you wish to create an M site, you need to set it up as an addon domain with your hosting provider and as an M record in your Domain File.

EDIT: That said, you can fake it using JavaScript to conditionally load content where it uses the initial screen size to pick a set of defaults that can be swapped with a button in your header/footer.

本文标签：