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)
Related
I seem to have problem when loading html.
without html head and meta tags my page is bigger because of images.
although i have set inline style for them:
""
so basically image should be 100% but limited to screen resoultion.
but in reality they are 4-5 time bigger than my screen resolution.
when i set meta tags the images are displayed perfectly fine within bounds of the page:
however font sizes are broken font-size:1px stated inline, shows something like 14-15px in mobile app
but when i remove meta from html font-size:1px will be really 1px in mobile app.
any idea's how can i solve this issue. also this only happens on android.. on IOS i don't have such issue with meta and font sizes.
you html must be responsive you need to add meta tag viewport
<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1, user-scalable=0" />
Viewport ?
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.
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 have a website that is using the viewport META tag to tell mobile browsers how to display content ( ). Viewing the page in the Android browser looks correct (and iPhone, etc).
When I load the page into a WebView component in an android Application, the WebView ignores the "VIEWPORT" tag, and renders the page at "full" resolution, which is zoomed-in in this case.
After lot's of experimentation I've determined that the Android WebView won't obey the 'viewport' setting if the actual page forces a width wider than the viewport setting.
For example, I was setting a viewport of 500px, but had an element on my page that forced a 960px width. The viewport wasn't obeyed because the WebView refused to hide that extra content.
This seems obvious when I'm typing it, but I must have spent days working on the problem.
As the docs say in the link in the best answer, you can specify using a meta tag how the device should react to the size of your web app compared to the screen. The following tag made an Android phone respect the viewport size of my web app:
<meta name="viewport" content="target-densitydpi=high-dpi" />
Try using this method of WebSetting class
setUseWideViewPort (boolean use)
I use this to tell Android webview to consider my "viewport" tag
Link in the accepted answer and this will help to understand viewport on Android.
In my scenario, fixed width is used, the solution is:
settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)
Another fail in the implementation on some Android Phones ist the fact, that for example the HTC Desire HD will ignore the viewport TAG - user-scale=no completly.
Use this:
<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />
Now Android WebView and the Browser adheres to the viewport settings.
Phew, this took a lot of tweaking to get right. Jeez.
I can only confirm your issue. There is an open issue at the android issue tracker. Please give it a vote/star if you're affected by this.
The only thing that worked for me was
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />
but specifically adding maximum-scale=1.0, minimum-scale=1.0 to the already existing tag helped. For my specific case I didn't want to give the user the ability to zoom in/out so YMMV.