I have a dynamic website (Java Servlet driven and completely 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 accommodate 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.