How to correctly display HTML page in browser and mobile
Question
I have a following HTML page. In this page I face different problems in desktop and mobile browser.
In desktop browser all things is display, but the image is too big. If I try to make it small then it becomes to small for mobile. So how to achive it, so the icon becomes suitable for both places?
In mobile browser
border-bottom-stylenot dispaly but in desktop browser it display. So what is the problem?
HTML:
<body style="height:100%">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" class="homebackground">
<tr height="10%">
<td colspan="3" style="background:url(../../stylesheets/images/user_male.png) no-repeat; background-size: contain;border-bottom-style:solid;border-color: #129AA2; border:1"> </td>
</tr>
<tr height="80%" style="background:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%;">
<td colspan="3">
<table style="width:100%; height:100%;" border="0" cellpadding="0" cellspacing="0">
<tr style="height:20%;">
<td align="right" class="mainbodyup"><img src="../../stylesheets/images/phone.png"/></td>
<td> </td>
<td class="mainbodyup"><img src="../../stylesheets/images/groupchat.png"/></td>
</tr>
<tr height="60%">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr height="20%">
<td class="mainbodyup"><img src="../../stylesheets/images/recent.png"/></td>
<td> </td>
<td class="mainbodyup"><img src="../../stylesheets/images/search.png"/></td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td colspan="3" style="background:url(../../stylesheets/images/setting_footer.png) no-repeat; background-size: contain;border-top-style:solid;border-color: #129AA2; border:1"> </td>
</tr>
</table>
</body>
CSS:
@media only screen and (min-width: 768px) {
.mainbodyup
{
height:20%;
width:33%;
padding:0px;
}
.mainbodyup img
{
max-width:30%;
margin:auto;
display:block;
}
}
@media only screen and (min-width: 100px) {
.mainbodyup
{
height:20%;
width:33%;
padding:0px;
}
.mainbodyup img
{
max-width:100%;
margin:auto;
display:block;
}
}
LATER EDIT
i change my css to media queries. now the problem i face is the last one media query is work.if i interchange then then also the result is same.both queries work fine seperately but if i put them together then last one is work, so what is the problem?
2 answers
solution1
1 2013-11-21 09:19:04
If you want to keep the same HTML and CSS for every platform (Desktop and Mobile), you should use CSS media queries . You could read this as a good start on the subject.
Media queries look like this:
@media only screen and (min-width: 720px) {
.mainbodyup img
{
max-width:100%;
margin:auto;
display:block;
}
}
This idea is to select CSS styles depending on the width (here we're using min-width , but there is also max-width ). A good idea, is to express you sizes in percentages, that way, it can scale depending on the screen size.
Or you could start with a responsive template for starters and build upon it, like http://html5boilerplate.com/
solution2
1 ACCPTED 2013-11-21 09:57:20
You have to use your media queries the other way around. First you target screens with minimum 100px and then min 768px. This way, the later will override the first one
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.