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).
Related
I'm trying to make web site with vieport equal 1400px. But when I increase viewport width from 1265px to 1400px it makes horizontal scroll on phone broowser. Is it possible to make viewport bigger than 1280px without hotizontal scrollbar?
You can do something like this:
<meta name="viewport" content="width=1400">
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.
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
I'm trying to mimick desktop-style iframes in Android (Dolphin browser) with some succes. The trick used is to put an <iframe> with position:relative; inside a <div> with fixed dimensions and overflow:hidden;, then using jQuery Mobile (or rather just the vmouse events) to handle mouse events for scrolling.
All this works fine except for one thing; Even though the <iframe> is clipped, it's content stretches the browser to match size. This is mostly noticable in height.
Here's simplified example code in JSFiddle: http://jsfiddle.net/euKhG/
And here's the result to watch within the Android browser: http://jsfiddle.net/euKhG/embedded/result/ (only works in Android browser!).
Does anybody know how to fix this issue? I've seen iScroll and similar suggested elsewhere, but they seem to touch frames with a remote src like this.
try setting target-densitydpi in meta tag
<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>
but you'll have to change all other css with respect to this as well
Mmmm, I think you missed something here. Right now your iFrame is getting cut off yes, but not due to you setting overflow:scroll, nor due to you setting a width/height property of the container frame; the cutoff that you are currently seeing is entirely arbitrary.
To prove this, add a background:#ff0000 to your container div, and you will see that it truly is not the div's width / height that is defining the cutoff region of your iframe but rather some 'default' iframe dimension properties: http://jsfiddle.net/kauUr/
My recommendation is, given you said your div is of fixed dimensions, set up your iframe with width/height properties of those same dimensions so that it matches. You can either do this using the width and height attributes, or more cleanly using css justas you have done for the container div. Once you give the iFrame the correct width / height, the cutoff should match what you expect and the browser shouldn't scroll to the size of the contents of the iframe, but rather to your specified dimensions. In fact, even if the div's dimensions aren't known ahead of time, you can use Javascript to acquire them and then correctly size the iFrame in runtime.
<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000">
<iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe>
</div>
And if that doesn't work, try slapping an overflow:none in the iframe style as well.
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.