I designed my Android phone gap app to be the dimensions of width: 480px height: 320px and the app has a zoom set on it to scale up fit the screen size of a 7 inch tablet which has the resolution of 1280 x 1024.
I've tried multiple ways to use zoom: 110% or so to get the app to scale to fit the screen, but when I run the app inside the actual environment it appears much larger than the screen. Did I miss something do I need meta code to emulate my scaling better the way it works inside a web browser?
Inside my head I have
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name="viewport" content="width=480,height=320">
Any help provided would be great.
I think you should read this article
Basically you should consider screen density not the actual width or height of device and than try to compensate with zoom.Check the section "Building web pages to support different screen densities"
Related
I am creating an extremely simple web page: it simply shows images one after the other until the bottom of the page.
Problem is... I am not sure what size images we should be using.
What is the ideal width of the images in a vertical browser?
Does this differ between android and iphone?
Just use the viewport size tag so the mobile devices will automatically resize the page to the correct dimensions.
You can for example just make a page which is 1024 pixels wide and define the viewport meta tag to be 1024px so all screens know it is supposed to be rendered as if the total screen width is 1024 px.
<meta name="viewport" content="width=1024">
This way you don't have to change the width of your design for each device. The device will scale the page for you to fit the screen.
Most mobile sites use a 480px width. Perhaps to improve loading time you better also use a smaller one since smaller images load faster and the phone will resize them anyway.
PS: Works on all modern devices across all platforms.
I'm currently developing a website that is designed to display best on iPad, but must display nicely on most mobile browsers.
I based the css on a width of 2048px, which is the pixel width of the iPad 3 when in landscape mode.
I then used the viewport meta tag as written below :
<meta name="viewport" content="width=2048" />
Having read the Apple documentation and the Android one regarding this topic, I was made to understand that a mobile browser first renders the webpage in a larger area defined by the viewport meta tag, then scales it down to match the device width.
This works very well on an iPad 2, but the width overflows on an iPhone, an iPhone Retina and a Galaxy Nexus. I didn't have the opportunity to test the website on an iPad 3.
How can this behaviour be explained?
If any detail were to be added on this issue, please let me know.
Thanks in advance for your help.
Read through http://developer.android.com/guide/webapps/targeting.html#ViewportScale
The trick is figuring out the balance between the device width and your viewport scale.
Specifically:
The default initial scale is calculated to fit the web page in the viewport size. Because the default viewport width is 800 pixels, if the device screen resolution is less than 800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the 800-pixel-wide page on the screen.
If you set your initial scale to 2, the page will be zoomed in. If you set it to .5, you will be zoomed out. Min and max can also overwrite these attributes
Okay So the website in question is this:
Now if you notice on this website, the resolution of the white background div is 445px across y 686px long. It's also fluid so if you shrink it, it will appear different to accomdate different sizes. (if you are on a cell phone that has a smaller width than 400px, it will actually show different images).
Okay, but the point is here is that this page is not showing right on android devices as shown below.
That phone, along with all the other phones in that previewer that are 480px x 800px are displaying the website like that. The website, as you can see if you click on it, is a max of 686px tall, so why the heck isn't the whole page showing on this mobile device?
The size of that "playplanet" logo is actually 180px across and it almost fills up the whole width and the width of that phone is SUPPOSED to be 480px across.
Am I missing something here?
If you look at the source code, you'll see I added the following meta tags:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
These are supposed to tell the android browser to display the page as the actual width of the device, so it should be telling it to make it show as 480px X 800px (samsung galaxy s 2 is 480px X 800px), but in reality if you look at the screenshot, it is actually displaying it as HALF that size since the logo is only 180px and its almost filled up the whole screen.
It should fit in there perfectly. The funny thing is actually my smaller than 400px width layout works perfectly on the smaller feature phone sizes (240 x 320 or vice versa), but this bigger one is causing me problems.
Have you tried target-densityDpi=device-dpi?
Quoting from this article: Android team has implemented a custom meta viewport property to allow you to customize browser scaling for high resolution (HDPI) screens. The CSS "px" unit may differ from a device's actual pixels, as the browser "scales" images and fonts to a larger size than you requested. Worse, it's using a non-integer scaling factor (e.g. 1.5x zoom, to scale 320px to 480px) which makes images look really weird.
Also, in this introduction to meta viewport the example below the section "Setting the target density" looks like your case.
Here is the updated meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
The screenshot you are looking at is flawed. It is displaying your site at a 240px x 400px resolution that is typical of many of the standard LG and Samsung smartphones. The Galaxy [as you point out] obviously has a higher resolution then that. My suggestion would be to report the bug to the service that you are using and until they correct it, try using another similar phone to test with. Any other android phone with the right resolution should work, as webpages are pretty much displayed the same for every single android device sans the resolution and orientation.
I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work.
**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!
#media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
}
#media only screen and (device-width:800px) and (orientation:portrait) {
/*style --code removed for sack of space */
}
Here is my viewport code in my html file
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
There is a difference between screen dimensions in CSS pixels and device pixels.
In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.
However, if this was the reported width for media queries we'd end up with responsive designs being triggered for traditional desktop sizes.
As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 - 3 pixel size.
The device-pixel-ratio reports (device pixels / CSS pixels)
e.g. 800 / 600 = 1.3333
To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.
This makes it difficult to target exact devices with width based media queries. I recommend accepting that you're designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.
Best of luck :)
Use the following viewport code:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
or this for not allowing scaling:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
The weird part about the Nexus 7 is that (as jpgr posted) it doesn't allow you to use the 1280/800 space that it boasts (out of the box at least). It is almost as if it is running zoomed in to some degree despite scaling preferences being set.
I notice this issue when my graphics seems slightly blurry. I tested the window size via javascript and it was posting numbers about 25% lower then expected. You will notice I have exclude the scaling parameters as it seems to ignore them for the most part.
The real key is using the target-densitydpi = device-dpi... This seems to make very right as rain.
Love working with the Nexus 7 for sure!!!
Overly pragmatic answer, but you can basically use the screen size of 601x880 to target the Nexus 7. Not technically complete, but should be enough to get you started if you are trying to use breakpoints in your media queries.
I'm developing a Android App with SenchaTouch2. I used a 480px wide png file as background image to fit in GalaxySII which has 480px width. It's perfectly fine in browser but after I exported as native app, that background gets bigger and out of the viewable range.
After some observation, if I want to fit in 480px screen, your original image should be 320px which is 1/3 difference.
Please let me know who can I manage to display background with original width n height.
Thanks!
It sounds like your WebView is performing scaling. That is, the default scale of 1.0 is equal to an mdpi device. Galaxy SII is an hdpi device, which would be scale 1.5. So your 480px image is becoming 480px * 1.5 or 720px and why a 320px would look like what you want.
Try specifying that the viewport uses the native DPI of the device like so:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/>
Alternatively, you could specify it as:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0"/>
You can read more about setting the viewport to target Android devices at: http://developer.android.com/guide/webapps/targeting.html
Note that if you run into subsequent font issues, you'll need to follow the steps in my answer to font size different on ios and android
Also note that for Sencha Touch 2, it looks like they turned off this automatic viewport setting: http://www.sencha.com/forum/showthread.php?184219-Viewport-Meta-Tags-not-injected-automatically