Can the "auto-fit to viewport" feature in Mobile devices be disabled?

[Under S.]

I'm adapting a desktop layout for mobile, and what should be a useful feature -- ie, mobile devices' ability to auto-fit layouts that would otherwise be too large into the viewport -- is proving to be an obstacle. Basically, I created a layout that has max-widths and min-widths specified on the main divs, specifically to deal with a large (desktop) and narrow (mobile) viewports.

The wide desktop layout will fill about 1000px in width of actual content. If I narrow the browser's viewport to half that (to simulate a narrow mobile view), the DIVs gracefully narrow while font size stays the same. In theory, all my bases are covered for 500px upward (it stops at 1000px)

The only problem is that my iPhone and iPad try to accommodate the max-width value of the desktop layout instead of falling back on min-width. Like it's trying to be TOO useful. So what I end up with is a zoomed-out layout that's difficult to read due to tiny font size.

Is there a command I can include somewhere that'll tell mobile devices to treat 500px like 500px, without any zoom compensation to fit to viewport?

[Nancy OShea]

Until Rob comes back around, I'll mention Mobile Detect.

Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.  Mobile_Detect is not a replacement for CSS3 media queries or other forms of client-side feature detection.

• http://mobiledetect.net
• GitHub - serbanghita/Mobile-Detect: Mobile_Detect is a lightweight PHP class for detecting mobile de...

Nancy

[Rob Hecker2]

The script I use is available here: http://mobiledetect.net

Some people criticize such script because it is impossible for them to keep up with all the devices out there, so they may mis-identify some devices, but the point is to not make it the cornerstone of your responsive plan. I just want to know if the device is a phone, a tablet, or a desktop computer. But even if the script thinks a phone is a computer, the page should still look good on the phone. That's because flex structure and media queries should handle all screen width issues.

I only use this script to decide what content is too heavy or complex to send to a phone.

Any other method of detection, such as with javascript, is too late to perform this function. The advantage of this script is that it does not require a round trip between the browser and the server. In other words, when your browser goes to a website it says: "hello, I'm Chrome on Android 6 on a Samsung Galaxy S7 and I'd like to see this web page."

[pziecina]

Hi Rob,

The purpose of using javascript to detect which image is loaded by srcset, is not just to decide which device is being used. It is also to detect the speed of the connection, that way I can decide if the option to play hd videos or any othe connection speed dependant content should be disabled or not.

It also helps in deciding how one handles user input, in that I can conditionally load scripts if they are required. Plus there is the added bonus of detecting what html, css features are supported.

[Rob Hecker2]

Thanks, Paula. Those are all things the mobile detect script doesn't do. In theory PHP should be able to evaluate the DOM, but that's probably more efficient with javascript.

Explanation for Under, since you say you are not a coder:

PHP lives on the server, knows a lot about the server environment and can harness the power of the server. Javascript lives on the user's browser and knows a lot about the DOM (document object model). So, for instance, PHP doesn't know how wide the actual browser window is unless Javascript shares that info.

PHP can be used to make decisions before any content is sent to the browser, but Javascript is always a result of a visit to the browser.