I have a simple web page with a content section and a position:fixed menu on the left hand side.
When I view it on an Android phone and change the orientation to landscape the menu disappears. It reappears when you turn the phone back to portrait.
This problem only seems to appear on later versions of Android - it works fine on my older (v2.2) Android and the page works fine on iOS.
Edit: I'm not sure if the Android tags that someone added are really appropriate. This is a problem with the CSS of a web page when viewed in the Android web browser...
have you tried setting the viewport?
Something like this as the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
have you tried to check the media queries in the css? this would be my first guess.
something like this:
#media only screen and (max-width:320px) and (max-height:480px){
.element_name{
display: none;
}
}
Related
I've made a website on (http://www.ik-ben-zzp.nl/template3) and it works all great. Now I found a problem on my mobile phone (Xperia Z3). I can pan to the right (white border) for about 50pixels, but I cant find any outgoing elements. Now if I set the overflow-x on hidden I cant move the container, but then my menu and buttons don't work anymore.
Can anyone help out?
fisrt change scale to 1.0:
<meta name="viewport" content="width=device-width, initial-scale=1">
and CSS style in porto.css style on line 41:
#filter:after {
display: none;
}
p.s CSS Style is only for mobile devices - it can couse bugs in desctop. Try to do it with #media query
I have a somewhat-responsive Bootstrap website. Above 1200px, the container is 1170px wide and below that, it scales down to 970px. Anything below that will also get the 970px version.
In my meta tags, I have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything works perfectly on Desktop computers as well as on iPhone or iPad devices. However on Android based mobiles like Samsung Galaxy (where the viewport is 360x640px I believe), the website shows fine too in landscape mode, except that it is zoomed in every time a page loads. Meaning it shows fine, but the user would have to scroll left and right. The user can zoom out and then it shows full-width without having to scroll, but the next time a page loads, the same happens again.
Is there any simple way to adjust/fix this?
I tried removing the width=device-width part, but that messes with the design on iOS devices and 1px lines don't show properly.
Try using
#media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example
You can calculate using device width / your html width
This is has worked for me .. i need to zoom out on tablets so i added this..
I'm working on optimizing a website for mobile devices, and I'm nearly done (yay!) but one thing makes me rack my brain:
How it works
I used CSS to restyle a tab-bar (actually a list) to work like a dropdown-menu. When touching the only visible list element, jQuery toggles the class "open" on the ul-element and all list elements appear also. That's how it works.
The Problem
When unfolding the dropdown-menu, it's font-size increases from 15px to 19px. And in Inspector there is absolutely no hint why this happens. Adding a rule like font-size: 15px !important; has no effect.
I made a little screencast for you: http://youtu.be/MUTJfTK70PE?hd=1
Affected devices
Android (Samsung Galaxy)
iOS (iPod, iPhone, Simulator)
Windows Phone (Internet Explorer) is not affected (wow!)
I would be very thankful for every single idea!!
You may try adding something like this: font-size: 1.5rem;
It turned out, that Mobile Webkits font resizing was the origin.
This rule solved it:
-webkit-text-size-adjust: none;
In html5 this is best solved by explicitly setting the viewport in the page header. The statement
<meta name="viewport" content="width=device-width, initial-scale=1.0">
turns mobile font resizing off. Setting text-size-adjust to none has the disadvantage of disabling zoom on mobile devices, still requires heavy prefixing and the value none seems to be ignored by some browsers.
I'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)
My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.
My dev build of the site is here: www.adamjdesigns.info/csu/engage
EDIT - Other code I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) {
$('html').css({'height':$(window).height(),'overflow':'auto'});
}
Any help is greatly appreciated!
Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.02" />
I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)
Thanks for your help, everyone!
FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:
<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>
This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.
What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.
Try this for your viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
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.