cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Maxime LUCE <Max...@somatic.fr>
Subject RE: iOS webview size
Date Sat, 07 Dec 2013 12:17:04 GMT
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