I've got a problem with the css on android with the chrome browser
what i do in css is:
html{
max-width: 100%;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
body{
background-color: rgba(101,122,151,0.8);
margin: 0px;
width: 100%;
overflow: hidden;
position: relative;
}
header {
width: 100%;
min-width: 100%;
color: yellow;
font-size: 40px;
text-align: left;
}
and in the javascript i outprint the widths of the body and header
alert($('header').width());
alert($('body').width());
it is showing me the body width is 980 and the header width is 340
but I don't understand why. can someone help me?
Thanks
When loading a webpage on a mobile browser, the browser will assume the site is designed for a larger screen and gives a larger viewport than the device so the user can zoom in on the content.
If you want the width of the device, you need to set the viewport size which can be done with:
<meta name="viewport" content="width=device-width, initial-scale=1">
There is more info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics
First, if you set max-width: 100% and then width: 100% means that width will override max-width, so you can remove max-width. Besides what's the point of setting min/max the same as width?
Second, if you set body width 100% then body takes max width of the viewport. So the question is what's the viewport size?
Have you tried to set min-width to 100% on the body?
Any reason you use position on html and body, and not header also?
Related
I have an html page which I print through different android devices. The height of the page is changing dynamically depending on some labels that I update through Javascript. Then I pass the height of the page to the android so I can set the height of the page that will be printed.(Dimensions are 856x3000ish pixels). My problem is that when I am trying to print the document from a bigger screen mobile device then the device pixel ratio is 200%-300% but when I am trying to print the same document from older smaller devices the ratio is 150%, so in every device(and on different browsers or same browsers with different zoom) the html page gets a different height. This has as a result the printer to behave differently depending on the different height. So for example: if I print from a device with 100% aspect ratio my print is perfect but if I print from a device that has 200% aspect ratio then my document is not printed properly and some centimeters at the end of it are not printed at all. I am pretty confident that the problem is the different aspect ratio of the different devices that make the height of the html page to change. How do I keep the same height of the html page no matter what the aspect ratio of the screen is? Any other suggestion is welcome.
#page {
margin: 5px 5px 5px 5px;
}
#font-face {
font-family: 'customFont';
src: url("../fonts/Roboto-Regular.ttf");
}
html {
transform-origin: center;
font-family: 'customFont';
line-height: 1.2em;
}
#mainBody {
height: 100%;
padding:0px !important;
margin:0px;
}
form {
font-size: 20px;
width: 840px;
padding-left: 5px;
padding-right: 5px;
border: 2px solid;
}
label {
border: hidden;
font-size: 18.5px;
vertical-align: middle;
}
Introduce the next line in the <head> of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1">
Next you can add in css the value of "height": 100vh.
VH stands for “viewport height”. So you always keep 100% of the height no matter what device.
The content would remain dynamic in my example. But if you want just a fixed size no matter what device you have to work with px.
Hope this works for you.
I'm having some troubles displaying my first websites on mobiles devices. When the device is vertical, the website background image does not fit the entire screen i've tried with the background-size: 100% 100% rule but does not work either. This is my css right now:
background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
The last trouble is the footer. It does not stick to the bottom of the screen even on some PC. This is the css:
<footer id="colophon" class="site-footer" role="contentinfo">
#colophon {
background: #000 none repeat scroll 0 0;
color: #ffffff;
opacity: 0.8;
padding: 20px;
}
I tried with bottom:0px but does not work and this is all.
Thanks in advance.
To make your background image fill the entire screen you can use background-size: cover. You will also need to make the body 100% height.
body.custom-background {
background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
background-size: cover;
height: 100vh;
}
It, however, will not look right with the current background image. You might want to make this 2 images instead.
For the footer, assuming it is only for this site and you will not change the height, or you can change the CSS accordingly, you could make the page id 100% of the screen height and add a bottom padding that is at least as high as the footer.
#page {
position: relative;
z-index: 999;
margin: auto;
min-height: 100vh;
padding-bottom: 250px;
}
Then you can give the colofon an absolute positioning.
#colophon {
background: #000;
opacity: 0.8;
color: #ffffff;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I'm having issue where the site logo gets cut off in phone but not in desktop. I've tried different things such as using <img/> <a> <div> but same issue.
Here's how it looks in phone: http://saarman.net/storage/123-mob.jpg
Here's how it looks in desktop: http://saarman.net/storage/123-web.jpg
Also notice in mobile the text is less bold than it is in browser. What could be the issue?
Here's the CSS I use inside the <a> where the logo is:
display: block;
width: 300px;
height: 80px;
background-image: url("../image/logo-dark.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
text-indent: -99999em;'
Tested with android phone using chrome browser
It seems to me that your DIV is getting out of the screen.
Probably this would work for you:
width: 100%;
max-width: 300px;
Note: You also might need to play with the height. However the following should do the work
height: auto;
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.
We have an issue with our responsive design. We use this style for mobile devices on our responsive theme:
body {
margin-left: 10px;
margin-right: 10px;
overflow-x: hidden;
max-width: 90%;
}
Below you can see a difference between iOS Broswer and Chrome:
It does not make sense to apply margin to your body, as it is the outermost element. Instead your should use a padding.
According to this ancient blog post Body padding and margin, different browsers will handle margin and padding on the body element in different ways. It wouldn't surprise me if this type of difference is still occurring today.
It worked with percentages:
body { margin-left: 5%; margin-right: 5%; overflow-x: hidden; max-width: 90%; margin: 0 auto; }