Today, I am going to brief about the working of – “Request a Desktop Site” & “Switch from a Mobile Site” or, Choose “Request Desktop Site” link and let the current webpage reload to the full desktop version of that site. I mean to say that, i am sharing a trick about disabling the responsiveness of webpage in mobile browser.

As we know, there are several mobile Operating Systems and that’s why each browser has it’s own implementation of the viewport meta tag according to respected OS. Different combinations will work on different browsers & OS.

Request Desktop view & disabled zoom viewport meta tag for all mobile browsers

Android OS:

Android 2.2: viewport meta tag does not seem to be supported at all. Default browsers were developed by their mobile companies and not fully compatible with viewport meta tag.

Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to ‘no’ means your own scale is ignored, this is the issue I’m facing now that drew me to this question… You cannot seem to disable zoom and scale at the same time in 4.x.

Android 4.x Chrome browser (which I think is pre-installed as default browser in most countries): You can make sure the user cannot zoom and the page is full-screen. The downside: you have to make sure the content has a fixed width. I haven’t tested this on lower Android versions. To do this see the example:

<meta name="viewport" content="width=620, user-scalable=no" />

iOS / Safari (Apple)

iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0(keywords yes/no don’t work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don’t need min and max since you can switch off zooming in the expected manner. Only use width or you’ll run into the iOS orientation bug

iOS/Safari 7.1: Since v7.1, Apple have introduced a new flag for the viewport meta tag called minimal-ui. To assist with full screen apps, this hides the address bar and bottom toolbar for a full-screen experience (not quite Full Screen API but close and doesn’t require user acceptance). It does comes with it’s fair share of bugs as well and doesn’t work in iPads.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

iOS/Safari 8 Beta 4: The viewport meta tag minimal-ui mentioned has now been removed by Apple in this release. Source – WebKit Notes

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

Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.

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

Try this … simple, but reasonable solution for sites that are heavily coded.

1. If you are using “meta viewport” tag in “head” then, below script will work.

   jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');

2. If “meta viewport” tag in “head” is not present then, use the following script.

    jQuery("head").append('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>');
    jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');

Note: Be sure that you are using “jQuery library version 1.6+” in your webpage.

Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it’s almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.



Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,angle brackets,configurable settings,desktop view in mobile,disable responsive view,disabled zoom,doctype html,elements,full web view,full webpage view,graphical user interface,html and xhtml,html basics,html5,interactive web applications,javascript,mobile,mobile browser,mobile to desktop view,OS,page elements,remove responsive view,request desktop site,responsive,responsive design,responsive web,viewport,viewport meta tagToday, I am going to brief about the working of - 'Request a Desktop Site' & 'Switch from a Mobile Site' or, Choose “Request Desktop Site” link and let the current webpage reload to the full desktop version of that site. I mean to say that, i am sharing a...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.