I have this minimal code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
<title>test</title>
<style>
html, body {
height: 100%
}
#container {
height: 100%;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"> </div>
</body>
<script type="text/javascript">
alert(window.getComputedStyle(document.getElementById('container')).height);
</script>
</html>
on a server at:
http://catplusplus.org.uk/catpsite/portfolio/test.html
so this code will alert the height of the container div which should be 100% of the browser window.
I've included the meta-viewport tag in the header which should ensure mobile zooming is set to 1:1 in terms of pixels.
when I load this on a LG nexus 4 running android on Chrome I get a height of 519px in portrait and 311px in landscape - which I think is pretty much right (screen size minus UI etc)
when I load this on the same phone using Firefox (v23) I get a height of 1134px in portrait and 718px in landscape, this seems wrong.
Is this a known issue, am I missing something simple, can someone fill the gap in my knowledge here please?
Thanks
James
p.s. just tested on Safari on iPhone 4 also seems off, reporting 540px for both portrait and landscape....
Related
I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.
By setting a css 'height' property on a parent container 'foo' the calculated 'font-size' of the inner elements changes wrongly. This happens only on a mobile device on Chrome.
To test this please try to run the following code under Chrome and choose any mobile device in the developer console:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.foo {
height: 600px;
color: white;
background: teal;
}
</style>
</head>
<body>
<section>
<h2>Header in first section</h2>
<p>Text with a normal size. Text with a normal size.</p>
</section>
<section class="foo">
<h2>Header in second section</h2>
<p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p>
</section>
</body>
</html>
Then disable (comment out) the 'height' property on the class 'foo'. The calculated 'font-size' for the p-element should not change but it does.
Chrome also shows the wrong size when commenting out the 'height' property in the document itself and reloading the page (-> then the text in both p-element is bigger than normal).
Please help me out - is this a bug that needs to be reported?
It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Working with the experimental property
Setting a min-height of 1px or max-height of 99999. It seems that this will break layout on some mobile devices. (See post: Chrome on android resizes font)
I must be missing something obvious, but here it comes... I just want to establish a narrow viewport width (320px) on my browser to check / design the web layout for a mobile phone display. Why is it that if set a viewport width with the meta tag, the browser doesn't respect it? This is what I do:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px" />
<style>
.content {
width: 100vw;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<p> Hello, this is the 'content' </p>
</div>
</body>
</html>
It just doesn't matter what size I put in the tag, it just seems to use the native display size. Can anybody tell me what the problem is and how to actually do it?
You don't need to set a viewport to check mobile compatibility. Just, click F + 12 keys in your browser chrome, and click on the mobile devices icon. This way you can select any viewport profile and check your design. See the image below:
Im trying to implement a 320x50 mobile ad for my mobile version of my website. I want the ad to span be the entire width of a mobile device. However the ad is showing up small and not the entire width of my iphone, and it scrolls along with content.
I use this code in my web page to call the mobile css
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />
And then in the css I have tried
div#mobilead {
width:100%;
}
I need the ad to show up at the bottom of the screen and stay in place even while scrolling.
any ideas would be greatly appreciated, thanks!
Here is the entire code as requested
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />
</head>
<body>
<div id="mobileB">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TWF_mobile_banner_adsense -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="6479374699"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
</html>
and then the css
#mobileB {
position: absolute;
bottom:0;
left:0;
z-index: 99;
width:100%;
height:50px
}
}
Are you sure you're getting this CSS as the most priority one? How big is the ad showing now?
I would start by adding static height to the div as well, if you're sure it's always the same height.
Could you please share your html structure as well? This is needed because it depends on your div structure there is a thing called property inheritance in CSS so when you're dealing with positioning it is actually relevant to know not only the specific object's properties but its parents as well.
Now from what I see, I can't see any reason why it shouldn't scroll with the content. I am not a pro but I think your best chance would be to use fixed positioning. Based on where you want the ad to appear, you will have to set specific coordinates. For example if you would like it to appear at the top right corner as a sort of "sticky" div, this is what you could do:
position: fixed;
top: 0px;
right: 0px;
z-index: 99;
width:100%;
height:50px;
I am sorry, I didn't see that you mentioned that you need it positioned at the bottom. In that case you could do it like this:
position: fixed;
bottom:0;
left:0;
z-index: 99;
width:100%;
height:50px
At any case, whatever you decide and what you need, you should be able to achieve by playing with top/bottom/left/right, position:fixed and z-index. :) Good luck!
I need the background image to stay centered because I am going to display charts in fixed positions and want the van (in the image) always to be visible. It's working fine in Chrome etc but nothing appearing in IE8.
http://clients.online95.com/RzMaOxkMOC/rep_mktsh.php
Thank you for any assistance you can provide.
#aa_breakdown_bg {
background: url(/RzMaOxkMOC/images/aa_breakdown_bg.jpg) center top no-repeat fixed;
overflow: hidden;
height: 100%;
}
<html lang="en">
<head>
<title>UK Breakdown Market Tracker</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<div id="aa_breakdown_bg"></div>
</body>
</html>
My guess would be that while your div is 100% height, that's 100% of zero. Try stretching both the body and html elements to 100%, too, and see if that does the trick.
body, html {
height: 100%;
}
Also, as Adrift mentions, you'll be a lot better off adding an appropriate DOCTYPE to your HTML, otherwise Internet Explorer will probably run in "quirks mode" and really confuse you.