I'm making a website skin / takeover.
It looks good on all browsers except android, where the skin image css parameter (width: 100%) is seen as the screen width not as at least the website's width. So it doesn't wrap the website but stops at the device's screen width. Please see yourself, I cannot explain very good. What can I do?
The first image is the website loaded on galaxy S3 and the second image is the website a little scrolled to see the right side. Please edit my question if you have better words.
This is the temporary link until I will move it to the client: http://csengrosseto.digitalprimes.com
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
This is the version that also controls the zoom.
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 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 lost and can't figure out how to convince Mobile-Firefox to load my site fully zoomed out :/ I couldn't find a working solution searching both stackoverflow and the web. Here's a link to the
WEBSITE!
There is no separate mobile-version of my website. I allow zooming in and out and on iPhones, iPads and the stock Android-Browser it works flawlessly. But using Mobile-Firefox on my Android it loads the page zoomed it... and that alone isn't the main problem!
The "clickable" area of the page remains the same small "box" of the initial-zoom: I can't slide my sliders, I can't even click on pictures outside of that small "activity box" to open fancybox-links and the like. As soon as I pan my site into that little "box" I can slide, click links and interact as I should be able to.
My meta-code is the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I used html5boilerplate as a starting point for my website, do you see any conflict that could pose with my view-port problem? Another user seemed to find a solution, getting rid of another meta-tag pointing to older browsers. I find the following in my code but it doesn't matter whether I erase it or not:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I also tried to work with the following code snippet, to no avail:
<style>
-moz-#viewport {
width: device-width;
initial-scale: 1;
}
</style>
Maybe someone knows a simple solution to this? I would be so grateful for any kind of help, advice or hint on how to tackle the problem :) Thank you very much in advance!
Cheers, Merlin.
Set the viewport width to the width you want it to be for mobile:
<meta name="viewport" content="width=640">
width=device-width forces the browser to have a 360px on Android, and 320px on iPhone.
Apparently if you set the width tag alone and set no other tags, it works.
I had a lot of work and the solution came after I inspected other sites that worked on firefox mobile. The solution was to increase the meta tag viewport:
This worked perfectly here.
<meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no">
When I load my site in an iphone it doesn't scale down. All I see is the top-left most couple hundred sqare pixels. I am new to mobile optimization, but I feel like most pages scroll to fit automatically, and most questions seem to be for the opposite scenario that I am having (force phone not to scale down).
I would want the whole page width to be visable and to make it so the user would have to zoom in to read the text.
I have tried with and without the following code in the head, but with no apparent effect.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">
Using the docs here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
It seemed like you should ignore most of the viewport properties and just set user-scalable to "yes". It's working on my iphone now.
<meta name="viewport" content="user-scalable = yes">
Edit:: The mobile tester site doesn't allow scaling, so it just gives scrollbars. With an actual phone this works.
try to use different css and switch them (server side) based on the client settings. For example the iPhone will identity himself like:
HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)
AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3
Depending on what scripting language you have available on the server side, you could change the css.
Here is an example.
The viewport tag controls what part of the page is going to be shown initially, but the page itself should still be designed for a 320x460 screen size to be shown on the iPhone without zooming. If you don't want to modify the structure of the page, viewport gives you control over how the page is initially shown.
Get rid of the width=1024, just put in
<meta name="viewport" content="width=device-width, initial-scale=1" />
And, clear out your phone's browser cache. Might even have to turn off & back on afterwards.
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.