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">
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 built a responsive website (http://www.cjkrause.de/borgo-v2) which behaves strangely on both android and ios smartphone devices. I have a navigation bar that seems to force the browser to shrink the whole site in order to fit it into the window. But there is no width set on this bar, so it should just rearrange its content to fit it on the screen.
I already have this in my header section:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
See here how it shows on my android phone:
android appearence
On a desktop browser, even in responsive emulation, everything works fine.
It looks to me as if the problem is with your map towards the bottom of the home page.
It's in an iframe with a hard coded width of 600px, so it doesn't scale down on smaller viewports and causes other elements on your page to expand.
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
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!
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">