When I created a PhoneGap application previously, the images rendering on the pages are not correctly displayed on high DPI devices. So I made the web page with fixed pixel ratio: 1 for all devices without considering device DPI. But this will reduce the clarity of images.
I planned to use fluidic styles for my new app and not use specific width and height in HTML. But when I specified height in px for a div (in CSS), the height renders differently in different devices.
Is there any way to make the ratio of HTML as well as CSS width and height same?
Is there any unknown property to tell HTML to behave in different Pixel ratio.
I am using the HTML tag:
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
I would like to render the page in device-dpi to avoid reduction in clarity. Kindly provide your ideas.
You should ideally avoid using pixels and use em's. For ex: Instead of 16px, use 1.1em or whatever is the equivalent for your situation. This worked for my phonegap jquerymobile applications
Related
I've been working on a responsive design. To stop the content from crossing boundaries i've used viewpoint meta tag with width = 480. The problem is i want my website to load with minimum of 480px no matter what. If the screen width is less than 480px I want it to fit the screen width by "Zooming out".
I've used the following viewpoint meta tag:
<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />
I've also used min-width css tag to specify minimum width.
<body style="min-width: 480px; width:100%; margin:auto;">
So after all this when i tried to load the website in DevTools Emulator (Google Chrome), it shows a horizontal scrollbar. Got any ideas on how to do it.
Have you tried width=device-width?
I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).
I'm developing a mobile website. It's working fine on iPhone in Safari using the following meta tag:
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
In Android, the website is scaling to about 480 pixels in width and only taking up about half of the web browser, meaning the left side has the website at approximately 480 pixels in width and the right side is blank.
If I change the meta tag to this, it works fine:
<meta name="viewport" content="width=680; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
So "hard coding" the width at 680 pixels works, however I don't want to do this as this website is designed to accommodate multiple sizes. I tried adding target-densitydpi=device-dpi to the meta tag with no luck. What else can I do to have my website scale to the device's width on Android?
I 'solved' it by using $('body').css({ width: $(document).width() }) in jQuery, since the site already relies on JavaScript. I realize this is not a clean solution, but it works and I'm tired, so for now it'll have to do. If anybody has a better solution I'd love to hear it.
I'm using the following line in my webapp:
<meta name="viewport" content="width=720, maximum-scale=1, user-scalable=no" />
This works perfectly fine on mobile safari - the document is 720px wide and fits the screen perfectly. However, when tested on the HTC One, the content was like 2.5x the width of the screen.
Android is supposed to support the viewport tag, so why is it ignoring the pixel width it should be displaying in?
All help appreciated.
Answer taken from Android docs:
Whether the user can change the scale of the page at all (zoom in and out). Set to yes to allow scaling and no to disallow scaling. The default is yes. If you set this to no, then the minimum-scale and maximum-scale are ignored, because scaling is not possible.
In that case, remove user-scalable=no and see what happens. That might be the fix you need.
I'm developing a web app for android using jquery_mobile.
Is there any equivalent way to 'layout_width:wrap_content'?
I want to set width for a label according to device width?
Any other options will also be welcomed.
You can solve this through a combination of viewports and CSS.
You are most likely already using a viewport similar to the one below, since you use jQuery Mobile:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
If you then set the width of your label to 100% it should have the width of the screen, assuming it is the outmost element. Otherwise it will have the width of its parent-element.
If it still has the wrong size try to define the width of each parent-element in the dom tree down to your label.
I would like to ask why my HTC Desire HD's browser reports viewport's width of 369px even though the actual pixel size of the screen is 480x800 WVGA.
I am using in my page this CSS styles:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
Can you please explain me this strange behaviour and how to force Android browser to actually set viewport's width to 480px rather than weird 369px ?
Thank you for any help.
A detailed explanation of the issue can be found in that blog post.
The number that you see (369px) is actually the size of the device multiplied by the default, assumed, screen density of 160 dpi.
In order to use the device screen density, you have to specify, in the viewport meta, that you want to use the device's dpi.
e.g.:
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
EDIT: The documentation of the WebView class now also has information about the target-densityDpi parameter, and the possible values.