You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "Wojciech Trocki (JIRA)" <ji...@apache.org> on 2018/05/16 22:44:00 UTC
[jira] [Comment Edited] (CB-14093) Setting a viewport scale factor
causes page to be draggable
[ https://issues.apache.org/jira/browse/CB-14093?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16478212#comment-16478212 ]
Wojciech Trocki edited comment on CB-14093 at 5/16/18 10:43 PM:
----------------------------------------------------------------
Basin on documentation in W3C suggested configuration is invalid. When the page is first loaded the initial-scale property controls the initial zoom level ie 1 Viewport pixel = 1 CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how the user is able to zoom the page in or out.
If we set width=device-width and scale will be different than 1 then content will automatically exceed the available window. That's why things are draggable. Not sure why in some cases things aren't but that's something to log into chrominium bugzilla.
This can be seen not only on mobile, but in regular browser when using mobile phone mode in inspector. Check:
https://www.w3schools.com/css/example_withviewport.htm
It is not Cordova issue.
In order to control device and view sizes use CSS media queries to apply different styling for small and large screens.
I would say 1 is recommended value that will work here.
was (Author: wtrocki):
Basin on documentation in W3C suggested configuration is invalid. When the page is first loaded the initial-scale property controls the initial zoom level ie 1 Viewport pixel = 1 CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how the user is able to zoom the page in or out.
If we set width=device-width and scale will be different than 1 then content will automatically exceed the available window.
This can be seen not only on mobile, but in regular browser when using mobile phone mode in inspector. Check:
https://www.w3schools.com/css/example_withviewport.htm
It is not Cordova issue.
In order to control device and view sizes use CSS media queries to apply different styling for small and large screens.
I would say 1 is recommended value that will work here.
> Setting a viewport scale factor causes page to be draggable
> -----------------------------------------------------------
>
> Key: CB-14093
> URL: https://issues.apache.org/jira/browse/CB-14093
> Project: Apache Cordova
> Issue Type: Bug
> Reporter: Doug Davies
> Priority: Major
>
> I'm using Cordova 8.0.0. When I set the following viewport meta tag
> <meta name="viewport" content="user-scalable=no, initial-scale=1.13, maximum-scale=1.13, minimum-scale=1.13, width=device-width">
> The screen is draggable (at least on Android). If I change to 1.14, then it is not. It seems very random… 1.11, 1.12, 1.14, 1.17, 1.18, 1.19 work… 1.13, 1.15, 1.16 don’t.
> You can reproduce this as follows:
> {code:java}
> cordova create demo
> cd demo
> cordova add platform android@7.1.0
> change viewport in index.html to
> <meta name="viewport" content="user-scalable=no, initial-scale=1.13, maximum-scale=1.13, minimum-scale=1.13, width=device-width">
> cordova run android
> {code}
> My real app does this dynamically so that tablets scale the UI up appropriately. I swear this has been working until recently, but I can't say for sure. On iOS the viewport-fit=cover seems to be taking care of this, although I didn't add that until I needed iPhone X support.
> Copying [~wtrocki] as instructed.
> I tried this on iOS and without that it also scrolled around. So not sure in what component the problem lies.
> I've tried this on a stand-alone (non-cordova page) and it ALWAYS seems to be scrolling. So Cordova must be intervening and helping at least some of the time.
> Here's the pages I was attempting
> [http://funkyvisions.github.io/index1.html]
> [http://funkyvisions.github.io/index1.13.html]
> [http://funkyvisions.github.io/index1.14.html]
> [http://funkyvisions.github.io/index2.0.html]
>
--
This message was sent by Atlassian JIRA
(v7.6.3#76005)
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org