Experimental viewport meta tag support for desktop, Blink-side.

Source/core/css/html.css

Index: Source/core/css/html.css
diff --git a/Source/core/css/html.css b/Source/core/css/html.css
index 335a57ec0fd0d106c9400c60672e4a38a0804227..f30ed0ccc900ed7d185d885d2a627dab44d23a73 100644
--- a/Source/core/css/html.css
+++ b/Source/core/css/html.css
@@ -1133,7 +1133,7 @@ textarea[dir=auto] {
 /* viewport */
 
 @viewport {
-    min-width: 980px;
+    width: auto;

[aelias_OOO_until_Jul13, 2013/10/25 04:10:08]

If not done here then the 980px value needs to be injected elsewhere or Android
layout of desktop pages will break.  Perhaps rune@ can advise.

[bokan, 2013/10/25 17:19:38]

I think the idea was that we could have separate stylesheets between Android and
Desktop, though I'm not sure how best to implement that or if now is the time to
do it. What are your thoughts rune@?

[rune, 2013/10/25 20:22:54]

You either need a separate stylesheet or a media query to decide which of the
behaviors to have. Separate stylesheets can be done by moving the 980px viewport
rule to a stylesheet that is only applied on Android.

There is an example of Android specific styles in
mediaControlsChromiumAndroid.css. I think that it might be mutually exclusive
with mediaControlsChromium.css and that the selection is done when generating
C++ from CSS at build time. For the @viewport rule, I think I would have put it
in a separate stylesheet that is applied after html.css.

Note that, since 'auto' is the initial value for width, "@viewport { width: auto
}" will not have any effects unless it is used to override another @viewport
rule. So, just removing the rule in the change above will have the same effect.

Regarding a media query to trigger the @viewport rule - If you have a certain
width where you want the Android behavior (min 980px) to trigger if the CSS
pixel device width is less than a certain width, and the "desktop" behavior
(auto) when it's above the same width, you could in theory[1] use:

@media (max-device-width: 1024px) {
  @viewport { min-width: 980px; }
}

In practice this means:

UAs running in an environment where the device-width is > 1024px gets the plain
old desktop behavior where the viewport size follows the window size. UAs having
a device-width < 1024px gets a minimum viewport width of 980px, BUT if the
initial viewport width (window width) is wider than 980px, the actual viewport
width will be the same as the initial viewport width. That is because the
max-width is auto and the actual viewport width will be as close as possible to
the initial viewport width.


There are other alternatives as well. Uglier, but I'm just mentioning:

If @media evaluation works in UA stylesheets, and the device-width will not tell
which behavior to use, introduce an internal media feature:

@media (-internal-something) {
  @viewport { min-width: 980px; }
}

Or use a min-width keyword that depends on a runtime flag:

@viewport { min-width: -internal-min-width; }


For now, I think I would have chosen a separate stylesheet whose application
depends on a runtime flag. At least, I think that having the @viewport rule in
one of the .css files is superior to having it injected in C++ code.

[1] I say "in theory" because I don't think media query evaluation works well in
Blink UA stylesheets. At least, I don't think they will re-evaluate (on
orientation changes for instance). But that needs to be checked further.

[bokan, 2013/10/28 22:17:52]

Ok, I added a viewportAndroid.css. I've tried a desktop and an Android build and
it looks like it works.

 }
 
 /* noscript is handled internally, as it depends on settings. */