Inspiring

Answered

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

Forum|Forum|9 years ago
March 8, 2017
4 replies
4651 views

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?

This topic has been closed for replies.

Correct answer pziecina

There's no line referencing the viewport anywhere in my code, so why is it still auto-fitting?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>er site</title>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Pathway Gothic One|Oswald|Palanquin|Caveat">
<link href="/scripts/site.css" rel="stylesheet" type="text/css" />
</head>
<body>

By default, smart phones will auto-fit.

I want to turn the auto-fitting off so that 1px = 1px.

I don't want it zooming out until the whole site is visible at its widest possible size.

How do I do that?

In iOS you cannot turn of the user zoom anymore, what Apple says is -

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

As for getting it to be 1px = 1px, you can only do this by using the correct media-query, complete with using the correct resolution. Get it wrong and the iOS Safari browser, (and every other browser) will automatically make the page fit.

That is why I said it is an almost impossible task. Plus do not forget that even if you do get 1px to = 1px, the users setting will over ride anything you set for text, (look in the setting).

U

Under S.Author

Inspiring

Interesting notes. If I'm using PHP (mostly includes) does that open other doors that might help me I.D. mobile devices w/out resorting to resolution? Perhaps PHP can help sniff out the fact that it's a mobile device some other way? Like a hidden "I am a mobile device" tag somewhere in its OS? (Yes, I realize I'm hoping against hope, here.) I ask because I'm not really a programmer, I'm a designer who learned as much about programming as they needed along the way.

Also, Bob, could you share your device-identifying script with us?

Nancy OShea

Community Expert

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.

Nancy

Nancy O'Shea— Product User & Community Expert

pziecina

Legend

If you use the srcset attributes for images, you can also use javascript to query which image is being used. This will also tell you if a hi-dpi and/or large display is being used.

U

Under S.Author

Inspiring

Having now Googled this to death, I see there's no consensus on the best way to handle being both desktop & mobile friendly. Were it not for the stupid iOS auto-fit issue, I was going to create a liquid layout that plays well single-column for mobile, but also adds stuff if the real estate is there to accommodate it. Except with auto-fit, the space is ALWAYS going to be there. So we end up with microscopic text to fit the largest layout available despite the existence of a Mobile version being ignored. #LeArgh

I've narrowed it down to the 2 most obvious (to me) solutions to the issue :

Create a single media query in the <head> that serves either the stylesheet with the large values, or the one with the narrow. In other words, one general all-purpose layout for desktop/landscape, and another for mobile/portrait.
One single stylesheet + LOTS of this-or-that media queries (so both dimensions of each class are at least side-by-side in the same file, rather than competing CSS files).

So... diversity or segregation -- What say you?

pziecina

Legend

https://forums.adobe.com/people/Under+S. wrote
So... diversity or segregation -- What say you?

No comment

The problem unfortunately is only going to get worse over the next few years, as more people are starting to browse the internet using smart-tv's (incl. 4k) and 4k game consuls.

U

Under S.Author

Inspiring

pziecina wrote
The problem unfortunately is only going to get worse over the next few years, as more people are starting to browse the internet using smart-tv's (incl. 4k) and 4k game consuls.

The auto-zoom will become more popular, I get that. At 4K or anything close to retina display, a 1000 pixel-wide website would occupy barely over 3 inches of width. Who can read that? The internet was built on pixel values. Perhaps that will change to something else now that we're essentially moving into the vector age of no fixed pixels (I even predict a future where your average $600 Nikon/Cannon camera will take vector photos, not just pixel ones, by essentially redrawing everything with ridiculous precision in vector format -- at first, it will be like Polaroids, you'll have to wait a few seconds to see the photo, even on-screen, because billions of calculations -- but I digress).

I've yet to hear a better solution than 2 sets of classes, one for portrait / small screens, and one for landscape / large screens. Web design was never about recreating the same exact experience on all viewports, that's a madman's mission. There is always going to be a "sweet spot" where one specific resolution really puts the website in its best light in the beholder's eye, but seldom will everyone agree on which one that is (some people LIKE artsy, some people prefer straight-forward, and some people like a mix of both).

That being said, which of the 2 methods I'm suggesting is the one you CSS deities prefer, or consider more sound today?

pziecina

Legend

If you look in your head content you will see a meta tag with the 'name' viewport, simply delete the device-width property, and change the user-scalable property to "no", (include the quotes").

Be warned though that mobile devices will then display to the nearest media-query, and unless you cover every other device size, the display with all fonts, images, etc. will be smaller, unless you also include a resolution setting in the media-query.

Do you know every device size and resolution, not just your iPhone/iPads?

U

Under S.Author

Inspiring

Could you be more literal about what I should be adding or modifying in the source code? I currently have no line there resembling what you're describing.

Also, I don't believe in designing for 100% of the resolutions out there; I believe in a nice compromise. I've got 90% of my demographic covered, don't worry. Still looking to disable that auto-fit thing on mobile, though.

pziecina

Legend

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded