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:43:00 UTC
[jira] [Commented] (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 commented on CB-14093:
--------------------------------------
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