The text on my mobile site is "squishing" to the left. The rest of the site fills the page as intended. The text is wrapped in div elements, but it doesn't matter if I put them in divs or paragraphs, the outcome is the same. When I set a height on each element, it corrects the problem, but I'm trying to avoid that since there are a lot of paragraphs and they are all different sizes, not to mention future usability.
Here is an example and a screenshot:
On ALL the text elements, this happens, whether it's a ul, div, p, or header tags...
Also, it appears fine on older Androids and iPhones...
Any help would be appreciated.
I figured out the problem. I didn't set the "initial-scale" in the name="viewport" tag in the head tags.
The final tag that resolved the issue is
<meta name="viewport" content="width=630px; height=device-height; initial-scale=0.5;" />
Thanks for all the input!
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'm currently developing a mobile stylesheet for a website and I'm experiencing a strange problem I can't explain:
Even though there are no "width" definitions in my stylesheet anymore the Android browser leaves a huge amount of empty space on the right causing scroll bars to appear.
I have no idea what causes this as there are no elements and the width is not explicitely set to anything.
Have you added the meta tag to your <head>?
<meta name="viewport" content="width=device-width">
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">
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
Works fine on iOS.
Any suggestions?
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.
Currently Chrome for Android scales text using font boosting and there's no way to disable it.
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom
I had the same issue with Firefox on Android.
The solution for me was to add the style "float: left;" to the div containing the problem text.
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
See How to prevent mobile browser from resizing text
-webkit-text-size-adjust:none is so horrible!
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
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.