[css-device-adapt] Need for a viewport descriptor: "zoom-behavior"

Hello to everyone,

first things first: this is the first time I write a recommendation for a
W3C draft, so please be patient, if I don't present you all necessary data
about my recommendation in the first mail.

Modern browsers have the problem that zooming is handled very differently,
because zooming isn't standardized. Some browser let you choose to zoom the
whole page or only text (like Firefox), others only let you zoom the whole
page (like Chrome). Users have to make a generalized decision, if they want
to zoom the whole page or only text for the whole web. But this decision
can't be generalized, because it depends on the content and styles used in
the specific website.

We first encountered this problem on mobile devices with viewport meta
element. If the developer of a website doesn't want the user
to zoom manually into a page, because he/she uses a carefully crafted
responsive design with media queries, he now has the option to
restrict zooming completely (<meta name="viewport"
content="width=device-width, initial-scale=1">). If he/she doesn't use
media queries and a responsive design, he/she can let the user
manually zoom via shortcuts or gestures.
Now we encounter several problems:

1. Lets take WebPlatform[1] as an example. The site has a great mobile
layout, but if I want to increase the font-size on a mobile device via
pinch-to-zoom everything gets bigger and the design breaks (e.g. the lines
become wider than the viewport, so the font-size is bigger, but I can't
read the whole line without scrolling).

2. Other sites like mobile.twitter.com[2] also use a specific mobile
layout, but if I want to increase the font-size via pinch-to-zoom they
prevent me from zooming completely. Or I would be forced to set a new
default font-size in my browser, but this would be applied to the whole
web, which isn't what I want.

3. Desktop websites like cloudfour.com[3] using proportional media queries
so that the breakpoints for layouts can change dynamically. Lets say we
want to we a website on a big TV screen, this screen gets visually the same
size of my smartphone if I sit far away. But I want to read the website,
therefore I can zoom into the site and even if my TV has a very big
resolution (say 4K!), it gets the "mobile layout" which I can read fine
even if I sit far away. But this only scales well, if I just zoom the
font-size and not the whole page. Sadly nit every browser allows us to do
this (like Chrome). And yes, I WANT the mobile layout on my TV. I can't
read anything, if a have 3- o 4-column layout with really big font-size.
Multiple columns work great with smaller font-sizes, but not the other way
round. (Further information on proportional media queries.[4])

I hope these cases make clear that we need a way to alter the zoom behavior
dependent on our content and styling. The following recommendation could be
a solution...

The CSS Device Adaption spec needs a new viewport descriptor:


5.10. The 'zoom-behavior' descriptor:
Name: zoom-behavior
Value: all | [text || media || style] | none
Initial: all (could be overridden by browser settings)
Percentages: N/A
Media: visual, continuous
Computed value: 'all', a list separated by double ampersands of 'text',
'media' and 'style', or 'none'

Values have the following meaning:
- 'all': This implies the combination of all other values except 'none', so
'text', 'media' and 'style'. This means that the user can zoom into the
whole page (and therefore is the default value, because it acts like most
current browsers).
- 'text': The zoom factor only alters font-size.
- 'media': The zoom factor only alters media elements like <img>, <video>
and <canvas>.
- 'style': The zoom factor only alters styling (e.g. border-width).
- 'none': The zoom factor can't be set by the user.

Therefore the developer can use a meta element to set the zoom behavior.
Examples:

User can zoom only text:
<meta name="viewport" content="zoom-behavior=text">

User can zoom text and media elements, but not styles:
<meta name="viewport" content="zoom-behavior=text&&media">


I'm excited to here your opinions. I don't know how to create listed values
within an content-attribute, so I choose && as delimiters, but I don't know
if this is the correct syntax. Sorry, for that.

This is completely optional. If you don't define a "zoom-behavior" it
asumes the browser settings the user made (zoom the whole page or zoom only
text, if the browser has this option). If you define a "zoom-behavior" the
settings of the developer gets a higher priority. The user can zoom the
whole page by default, but if a layout works better when only zooming of
text is allowed, the developer has now the choice to do so.

The values can be extended if necessary. E.g. you could add 'img', 'video'
and 'canvas', if somebody thinks this would be a good idea to let
user zoom only images, but not videos and 'media' would imply the usage of
all three elements.
But that is another decision...

Thank you all for taking your time. I hope you think that this would be
useful addition to the current spec.

Regards,
Pipo

[1] http://www.webplatform.org/
[2] https://mobile.twitter.com/
[3] http://cloudfour.com/
[4]
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/