I'm using phonegap to export a very simple html5 page to an iphone app and running into this silly issue.
iPhone resolution is 960x640.
When I set the canvas to those dimensions, it seems way too big.
<canvas width="960" height="580" style="background-color:#607559"></canvas>
Why is that? And how can I utilize the full high definition capabilities of iphone4. It seems that canvas fits full-screen if I set the canvas to something of older iPhone(320×480).
Setting viewport to something like this seems to work, but will this be a performance hit?
<meta name="viewport" content="width=device-width, height=device=height, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
It depends about which iphone you are talking about.
The old iPhone 3GS has a resolution of 320x480. The newer iPhone 4 and iPhone 4s have the so called retina display, which has a resolution of 640x960, but it automatically scales up (you don`t access the pixels independently.
But you can set the device pixel ratio which is very good covered for canvas in this question: Canvas drawing and Retina display: doable?
Related
I want to change viewport on pc like a mobile view. I'd like to change it to a viewport of 480 pixels wide(the letters get bigger), which one should I modify?
site is https://www.dorothycard.com/v/sample-classic
Codes below
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
There is a CSS property zoom, but it's non-standard and you cannot set sized based on container size as far as I know. If you set up everything to be based on rem/em you could also scale the page by setting the font-size on html.
To only affect the desktop view it should be possible to employ a #media query.
If you just want to test dimensions, that can be done in the browser development tools. Most of them will have a "responsive" mode where the exact dimensions can be specified or known devices can be selected.
E.g. in Chrome it's this button:
In Firefox:
I can't seem to figure out why the mobile view of a-frame camera aspect ratio is completely off. it's scaled so everything looks skinny in portrait mode and wide in landscape. I am also getting this error in console:
dpdb.js:79 Failed to recalculate device parameters.
I've adjusted the CSS and set the canvas width/height on a settimeout after it renders. Any way around this issue?
I'm creating an app using OpenGL...
I have a retina iPad, and I'm using a texture that stores #2x images. When my app starts up, the OpenGL framebuffer is created and querying the size of it comes back as 1536x2048 - so far so good.
I also have a texture for non-retina iPad display (768x1024), but I do not have a non-retina iPad. I'd like to force my retina iPad to use the non-retina graphics (i.e, for it to use scale == 1.0). So I'd like it to create a 768x1024 OpenGL framebuffer. The problem is that it always creates a 1536x2048 frame buffer, and scale is always 2.0.
Is there a way of forcing it to use a scale of 1.0, and creating a smaller framebuffer? The base iOS version for the app is 8.0, but since iOS8.0 still works on the iPad2, I'd like to test that resolution as well.
I've tried using UILaunchImages, but that doesn't seem to work? In the past, when an app was written for a non-retina screen, a retina device used to scale the lower resolution to fit the higher-resolution screen, and that's what I want - at least so I can test....
Is UILaunchImages the right way to go to try and get iOS to think that only low-res graphics are available?
IIRC, simply by having an #2x resource (splash, icon, etc..) used to signal iOS that you are running an app with support for Retina. I think since then Apple has added a NSHighResolutionCapable key that you can try to set false in the plist. So try removing all #2x resources from your build and setting that key to false.
Another approach is to change your glViewPort and/or the Projection matrix to scale your logical resolution to 1024x768. I have the opposite problem in that I need to scale non-retina images up to the retina backing scale. I use a Scaling matrix in my stack to fix this.
Ask me how I mix and match retina and non-retina images!
ive put the viewport meta tag into a a tumblr blog and it works fine but there seems to be a large area that scrolls to the right of the body that has nothing in it.
This does not show up on the desktop version so i cant use firebug to see why and im kinda at a loss of how to identify the problem.
I was thinking of setting overflow:hidden; but i didnt think you can do this for only horizontal plus it does not actually address the problem just covers it up.
the blog in question is www.blog.lightandspace.co.uk
please see the THIS SCREEN SHOT for example, its from ios sim but its exactly the same on the device (please not the scroll bar at the bottom) ... sorry i can embed it but im a new user and it wont allow me to
any helps much appreciated
cheers
It could be because your viewport width is set to 1224px, which is much wider than the iPhone viewport. Try this instead:
<meta name="viewport" content="width=device-width maximum-scale=1.4" />
This should set the viewport to the width of the device, so it should render nicely on any mobile device.
When a users views my site on a Blackberry they are unable to scroll horizontally. This is important because the view port on the Blackberry is smaller than that of the width of the site. They can still scroll up and down just not side to side. The other thing is they cannot zoom out for the site either. Finally the site will not change orientation either. When testing on iPhone and iPad zooming and scrolling work fine.
Could it this be caused by a meta tag or view port setting? What are some of the things that could be causing this issue?
The issue appears to be that in absence of a meta tag the Balckberry Browser will set its own viewport to the screen width of the device. This made it so that the rest of the page to the right of the device viewport was cut off and although users could scroll up and down they could not scroll side to side.
The issue was solved by adding a meta tag defining the viewport, its width, and a zoom level with scalability explicitly defined.
<meta name="viewport" content="width = 1000, initial-scale = 1.0, user-scalable = yes">