cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From purplecabbage <purplecabb...@gmail.com>
Subject Re: iOS webview size
Date Sat, 07 Dec 2013 16:27:20 GMT
Most device browsers report device-width as 320px for backwards compatability from when sites
were designed to fit the iPhone screen. 

Lots of info here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Sent from my iPhone

> On Dec 7, 2013, at 4:17 AM, Maxime LUCE <Maxime@somatic.fr> wrote:
> 
> I sometimes use canvas but the expressed issue is happening while there is no canvas.
> I used the term canvas to say "inside of web view frame".
> 
> 
> Cordialement.
> ----------------------------
> Maxime LUCE
> maxime@touchit.fr
> 06 28 60 72 34
> http://touchit.fr
> 
> -----Original Message-----
> From: Stephan Wezel [mailto:s.wezel@web.de] 
> Sent: samedi 7 décembre 2013 07:32
> To: dev@cordova.apache.org
> Subject: Re: iOS webview size
> 
>> Sorry, i needed to specify that my app is not a canvas app, it's a HTML 5 app.
> Do you use the thml 5 canvas then?
> 
>> Just to know, since which IOS version, hi resolution is available?
> This isn't directly tied to a iOS version but to a generation of iphone/ipad
> 
> For iPhone: since iPhone 4 the display is a "Retina" Display (HiRes) For iPad: AFAIK
since iPad 3
> 
>> On Friday 06 December 2013 23:42:47 Maxime LUCE wrote:
>> Sorry, i needed to specify that my app is not a canvas app, it's a HTML 5 app.
>> 
>> I use the viewport meta with value "initial-scale" to "1.0" and "width" to "device-width".
>> 
>> I will try some CSS device pixel ratio fixes and let you know about the result.
>> Just to know, since which IOS version, hi resolution is available?
>> 
>> Cordialement.
>> -------------------------------
>> Maxime LUCE - Somatic
>> maxime.luce@somatic.fr
>> 06 28 60 72 34
>> ________________________________
>> De : Stephan Wezel<mailto:s.wezel@web.de> Envoyé : ‎06/‎12/‎2013 18:36

>> À : dev@cordova.apache.org<mailto:dev@cordova.apache.org>
>> Objet : Re: iOS webview size
>> 
>> Oh i forgot to mention, that the posted code is derived from the High 
>> DPI canvas entry on html5rocks
>> 
>> Stephan
>> 
>>> On Friday 06 December 2013 18:17:57 Stephan Wezel wrote:
>>> Or you could use following code to do the scaling automatically if 
>>> needed
>>> 
>>> var devicePixelRatio = window.devicePixelRatio || 1,
>>>    backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
>>>            ctx.mozBackingStorePixelRatio ||
>>>            ctx.msBackingStorePixelRatio ||
>>>            ctx.oBackingStorePixelRatio ||
>>>            ctx.backingStorePixelRatio || 1;
>>> 
>>> ratio = devicePixelRatio / backingStoreRatio; if (devicePixelRatio 
>>> !== backingStoreRatio) {
>>>    var oldWidth = canvas.width;
>>>    var oldHeight = canvas.height;
>>>    canvas.width = oldWidth * ratio;
>>>    canvas.height = oldHeight * ratio;
>>> 
>>>    canvas.style.width = oldWidth + 'px';
>>>    canvas.style.height = oldHeight + 'px';
>>> 
>>>    // now scale the context to counter
>>>    // the fact that we've manually scaled
>>>    // our canvas element
>>>    ctx.scale(ratio, ratio);
>>> }
>>> 
>>> if you set the size of the canvas element to the screen/window size 
>>> and using above code you will get on any resolution a sharp display
>>> 
>>> I'm using above code successfully with cordova on iOS and Android 
>>> (e.g. on a Nexus 4 the ratio is 1.5 instead of 2 on iPhone with 
>>> retina display)
>>> 
>>> Stephan
>>> 
>>>> On Friday 06 December 2013 11:48:39 Ian Clelland wrote:
>>>> Yes, if we're actually talking about the HTML <canvas> element, 
>>>> then it's default resolution will match the element's size *in CSS 
>>>> pixels*, which are twice the size of device pixels on a retina display.
>>>> 
>>>> You need to set the element's "width" and "height" attributes 
>>>> (*not* the CSS properties) to increase that resolution.
>>>> 
>>>> A full-screen hi-res canvas on an iPhone 4 would look like this:
>>>> 
>>>>    <canvas style="width: 320px; height: 480px;" width="640"
>>>> height="960"></canvas>
>>>> 
>>>> (and, of course, those numbers would be different on an iPhone 5, 
>>>> or an Android device :) )
>>>> 
>>>> Ian
>>>> 
>>>> 
>>>>> On Fri, Dec 6, 2013 at 11:40 AM, Michal Mocny <mmocny@chromium.org>
wrote:
>>>>> 
>>>>> Yeah if you don't have correct viewport, and are using the 3.5 
>>>>> inch retina iphone simulator, you will get 2 device pixels per 
>>>>> css pixel, and thus see the resolution you claim.
>>>>> 
>>>>> Also, even if you fix the viewport, I think that for efficiency 
>>>>> reasons some web renderers will specifically treat the canvas 
>>>>> element as lowdpi even on a highdpi device.  I do not know the 
>>>>> details of safari webview, but thats worth exploring if viewport 
>>>>> doesn't fix the issue.  One quick article I found that generally 
>>>>> explains things to consider when working with canvas on highdpi 
>>>>> is: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
>>>>> 
>>>>> 
>>>>> On Fri, Dec 6, 2013 at 10:54 AM, Andrew Grieve 
>>>>> <agrieve@chromium.org>
>>>>> wrote:
>>>>> 
>>>>>> Problem with viewport <meta> tag?
>>>>>> 
>>>>>> 
>>>>>> On Fri, Dec 6, 2013 at 10:07 AM, James Jong 
>>>>>> <wjamesjong@gmail.com>
>>>>> wrote:
>>>>>> 
>>>>>>> Are you targeting prior to iOS 5?
>>>>>>> -James Jong
>>>>>>> 
>>>>>>>> On Dec 6, 2013, at 9:49 AM, Maxime LUCE <Maxime@somatic.fr>
wrote:
>>>>>>>> 
>>>>>>>> By default, Cordova ios project targets iOS 5+, could it

>>>>>>>> be blocking
>>>>> ??
>>>>>>>> 
>>>>>>>> 
>>>>>>>> Cordialement.
>>>>>>>> 
>>>>>>>> 
>>>>>>>> Maxime LUCE
>>>>>>>> 
>>>>>>>> 
>>>>>>>> maxime@touchit.fr
>>>>>>>> 06 28 60 72 34
>>>>>>>> http://touchit.fr
>>>>>>>> 
>>>>>>>> 
>>>>>>>> -----Original Message-----
>>>>>>>> From: mmocny@google.com [mailto:mmocny@google.com] On 
>>>>>>>> Behalf Of
>>>>> Michal
>>>>>>> Mocny
>>>>>>>> Sent: vendredi 6 décembre 2013 15:45
>>>>>>>> To: dev
>>>>>>>> Subject: Re: iOS webview size
>>>>>>>> 
>>>>>>>> 320 sounds like the width of the first three generations

>>>>>>>> of iphone
>>>>>>> (though the height is not 240 but 480).  Perhaps you are 
>>>>>>> emulating an
>>>>>> older
>>>>>>> device?
>>>>>>>> 
>>>>>>>> 
>>>>>>>> On Fri, Dec 6, 2013 at 9:28 AM, Maxime LUCE 
>>>>>>>> <Maxime@somatic.fr>
>>>>> wrote:
>>>>>>>> 
>>>>>>>>> Frame is fullscreen but frame content is sized
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> Cordialement.
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> Maxime LUCE
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> maxime@touchit.fr
>>>>>>>>> 06 28 60 72 34
>>>>>>>>> http://touchit.fr
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> -----Original Message-----
>>>>>>>>> From: James Jong [mailto:wjamesjong@gmail.com]
>>>>>>>>> Sent: vendredi 6 décembre 2013 14:47
>>>>>>>>> To: dev@cordova.apache.org
>>>>>>>>> Subject: Re: iOS webview size
>>>>>>>>> 
>>>>>>>>> Sounds like you have some customization in obj-c or the
nib files.
>>>>>>>>> The frame should be fullscreen by default.
>>>>>>>>> -James Jong
>>>>>>>>> 
>>>>>>>>>> On Dec 6, 2013, at 8:25 AM, Maxime LUCE <Maxime@somatic.fr>
wrote:
>>>>>>>>>> 
>>>>>>>>>> Hi,
>>>>>>>>>> 
>>>>>>>>>> I will try to explain the issue more precisely.
>>>>>>>>>> When I launch my app using XCode in the iOS emulator,
I 
>>>>>>>>>> can see
>>>>> that
>>>>>>>>>> my
>>>>>>>>> app is resized in a 320x240 frame. This behavior force

>>>>>>>>> iOS to resize every DOM elements to adjust to an arbitrary
320x240.
>>>>>>>>>> 
>>>>>>>>>> I checked the behavior by putting a 
>>>>>>>>>> "alert(document.width) on start
>>>>>>> up".
>>>>>>>>>> 
>>>>>>>>>> Someone could help me override this behavior ? I'm
not 
>>>>>>>>>> an iOS nor
>>>>>>>>> objective C expert.
>>>>>>>>>> 
>>>>>>>>>> 
>>>>>>>>>> Cordialement.
>>>>>>>>>> ---------------------------- Maxime LUCE 
>>>>>>>>>> maxime@touchit.fr
>>>>>>>>>> 06 28 60 72 34
>>>>>>>>>> http://touchit.fr
>>>>>>>>>> 
>>>>>>>>>> 
>>>>>>>>>> Not sure what you mean.
>>>>>>>>>> 
>>>>>>>>>> Are you saying you can only have a canvas with a
max 
>>>>>>>>>> size of 320x240? I
>>>>>>>>> have an app with a larger canvas than that.
>>>>>>>>>> 
>>>>>>>>>> If that is what you are saying, be sure you are not

>>>>>>>>>> trying to set the
>>>>>>>>> canvas size just using CSS.
>>>>>>>>>> 
>>>>>>>>>> For an example maybe have a look at my canvas demo:
>>>>>>>>>> 
>>>>>>>>>> https://github.com/devgeeks/Canvas2ImageDemo
>>>>>>>>>>> On 06/12/2013 12:06 pm, "Maxime LUCE" <Maxime@somatic.fr>
wrote:
>>>>>>>>>>> 
>>>>>>>>>>> Hi everyone,
>>>>>>>>>>> 
>>>>>>>>>>> It appears that on iOS, webview is restricted
to a 320x240 canvas.
>>>>>>>>>>> 
>>>>>>>>>>> Is it possible to automatically set canvas size
using 
>>>>>>>>>>> device screen's
>>>>>>>>> one ?
>>>>>>>>>>> 
>>>>>>>>>>> Why is it not the default scenario ?
>>>>>>>>>>> 
>>>>>>>>>>> Cordialement.
>>>>>>>>>>> ------------------------------- Maxime LUCE -
Somatic 
>>>>>>>>>>> maxime.luce@somatic.fr
>>>>>>>>>>> 06 28 60 72 34
> 

Mime
View raw message