I don't like media queries, I think it's a terrible idea.
I want to make an app for ONLY phones. So my app will look the same in all cases, but all I'm trying to do is just rescale the app for the different screens. That's it!
Now I don't like EMs, and I don't like percentage widths. All those ideas sound terrible. I like VW/VH http://caniuse.com/#feat=viewport-units but ios safari doesn't support this yet.
So my other idea is to make a pixel based static app. For example think of a calculator that is 400px by 400px in height. And everything else is sized in pixels.
Can I just take this, and set up a viewport that fits my static content but stretches it to the viewports size? I think this is possible as the viewport supports zooming, no?
Just add this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
...and then use width:100% style for all your container elements.
edit: the fact that you 'don't like' percentages. It's the solution to your problem though.
found out sort'of what I'm looking for
scale fit mobile web content using viewport meta tag
Especially the answer by Bren1818 where he programmatically calculates the initial-scale of the viewport. Although I'm not sure I like this answer either... wish vh/vw units would get on to mobile already.
Related
i have a issue in my Android page on input focus, i can't disable auto-zoom
only in (orientation: portrait) :
http://ufficio.web-project.it/smlapalma/akenta/invia-scusa.html
I have already try this codes:
meta name='viewport' content='user-scalable=0'
or
input:focus { font-size: 16px!important}
but nothing.
Thanks in advance.
Regards
Guido
This would be the right meta-tag:
<meta name="viewport" content="width=device-width, user-scalable=no">
But, this won't solve your problem because this meta tag doesn't change the size of your sites components. Let's say you have a <div> with the width of 1200px, the user's browser will view it 1200px wide.
I looked at your website, and the problem lies in the foundation of your CSS. You are using px a lot, where you might want to use %. If you use percentage, you will see that your site adjusts to the screen size. You should also use em as unit for font size instead of px. My tip is to avoid px-units as much as possible.
But of course, this means you will have to change your entire CSS, which is much work. But eventually this will solve your problem.
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.
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 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 need my website to adjust itself according to the device. I used the following viewport meta tag:
<meta name="viewport" content="user-scalable=no,width=device-width, height=device-height, minimum-scale=0.1, maximum-scale=0.65" />
It works alright on iPhone. but on android it looks it doesn't responded to it at all even when I change the scale values. Is there a different tag for android?
You should use the same tag for Android, but there are a few differences how different platforms calculate initial scale from viewport size, or viewport size if not set. Also keep in mind that initial-scale only works first time you load the page, if you reload the page it will keep the scaling that you currently have.
I'm unsure what result you are looking for, but you have a great reference for Android here ( http://developer.android.com/guide/webapps/targeting.html ) and for Iphone here ( http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html ).
Also, you can google for "tale of two viewports" (i was unable to post link because of low reputation)