cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Stephan Wezel <s.we...@web.de>
Subject Re: iOS webview size
Date Fri, 06 Dec 2013 17:35:53 GMT
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