[RESOLVED] Warning: Consider avoiding viewport values that prevent users from resizing documents

cluelessPHP

So I was using w3 validator and I came across this warning "Warning: Consider avoiding viewport values that prevent users from resizing documents" is there any particular reason to allow users to resize? Or what's the logic behind this warning?

Weedpacket

You've never been reading a page and resized the browser window for whatever reason?
Or on a phone, reading the page in portrait orientation and then turning it to landscape?

What is the offending rule? I've been through the entire W3C validator and can't even find the word "viewport", so I can't tell what's to blame.

cluelessPHP

Weedpacket;11064499 wrote:
You've never been reading a page and resized the browser window for whatever reason?
Or on a phone, reading the page in portrait orientation and then turning it to landscape?

Well I'm trying to do it so you don't have to resize the page (screw my layouts up)

Weedpacket;11064499 wrote:
What is the offending rule? I've been through the entire W3C validator and can't even find the word "viewport", so I can't tell what's to blame.

<!DOCTYPE html>
<html>
    <head>
        <title>GOT SOCIAL</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="assests/css/cssreset.css">
        <link rel="stylesheet" type="text/css" href="assests/css/style.css">
    </head>    

<body>
<div class="wrapper">
    <div class="box header">Header</div>
      <div class="box sidebar">Sidebar</div>
        <div class="box content">
             <div class="meaningIndex"><h2>cake</h2></div>
            <div class="boxdisplay">
                <div class="box a"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
                <div class="box b"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
                <div class="box c"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
                <div class="box d"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
                <div class="box e"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
                <div class="box f"> <img src="assests/images/coffee.jpg" alt="picture of coffee"></div>
            </div>
        </div>
    <div class="box footer">Footer</div>
</div>
</body>

</html>

this is the offending code

Weedpacket

Hmmm.....

initial-scale=1,maximum-scale=1,user-scalable=no

So if your layout doesn't fit in the available device space, then it won't be scaled to fit, and the user won't be able to zoom out to see the bits that fell off the edges of the screen... And if the text you chose is too small for their eyesight, they can't zoom in to read it.

Here's the W3C's reason for the warning (from https://drafts.csswg.org/css-device-adapt/#at-ruledef-viewport):

Authors should not suppress (with user-zoom: fixed) or limit (with max-zoom) the ability of users to resize a document, as this causes accessibility and usability issues.

There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – where custom zoom functionality is handled via scripting. However, in general this practice should be avoided.

Most user agents now allow users to always zoom, regardless of any restrictions specified by web content – either by default, or as a setting/option (which may however not be immediately apparent to users).

Mind you, I don't think zoom/scaling has anything to do with layout, but is instead applied (by the user!) after everything else.

cluelessPHP

I was looking at Facebook on mobile, apparently they don't allow you to resize, although they do seem to have quite a few errors. I guess it's a case of follow w3c guidelines or throw them out the window? But then again well they are who they are for a reason

NogDog

Well, "warning" != "error". It means you should be doing whatever you're doing consciously and, where applicable, have some fallback for when it has a negative effect (JavaScript?) or just admit that it's a use case you're not concerned with. If it is a use case you're concerned about and you don't have a fallback, then you probably should fix it.

E.g., if you either don't care if vision impaired people cannot enlarge it in some browsers/devices, or perhaps deal with small screens with similar issues, then leave it alone. If you want to make sure anyone with a reason to enlarge the screen can do so in any situation, then change/fix it.

But yeah, warnings and maybe even some errors will not necessarily prevent a web page from "working", and if you do HTML and CSS validation on many/most popular sites you'll most likely find lots of warnings and maybe some errors; so it becomes a question of what is "good enough" for "enough users" in any given business case -- and can also be a result of web developers everywhere who don't know/care/check that stuff. (shrug)

cluelessPHP

Well what I'm building I'm planning to use for when I finally apply for jobs, so I'm aiming to make it a close to perfect as can be including no errors/warnings