PDA

View Full Version : Xin giúp code web khi xem bằng mobile


Extra
26-08-2013, 15:44
Em có 1 code web thiết kế cho desktop như thế này:


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Test</title>
</head>
<style>


#content{
position:fixed;
width:600px;
height:550px;
background:#F0F0F0;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -275px;

}
a {
display: block;
width: 120px;
height: 35px;
border-radius: 4px;
text-align: center;
line-height: 35px;
text-decoration: none;
font-family: 'Helvetica';
font-weight: bold;
font-size: 10pt;

}

/* Button Style 1 */
/*Normal*/
.ml-button-1{
background-color: #85DD7C;
border: 1px solid #158D34;
-moz-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
-webkit-box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
box-shadow:inset 0px 0px 1px rgba(26,154,72,1);
background-image: -o-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -moz-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -ms-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
color: #1d7819;
text-shadow: rgba(254,252,252,0.5) 0px 1px 0px;
}


/*Hover*/
.ml-button-1:hover {
background-color: #A7ED9E;
background-image: -o-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -moz-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -ms-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
}


/*Active*/
.ml-button-1:active {
background-color: #5DC34E;
-moz-box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
-webkit-box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
box-shadow:inset 0px 0px 5px rgba(26,154,72,1);
background-image: -o-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
background-image: -moz-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
background-image: -ms-linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
background-image: linear-gradient(90deg , rgb(182,237,176) 0%, rgb(112,201,101) 100%);
text-shadow: none;
}

/* Button Style 2 */

/*Normal*/
.ml-button-2{
background-color: #EBE584;
border: 1px solid #A89917;
-moz-box-shadow:inset 0px 0px 1px rgba(184,166,43,1);
-webkit-box-shadow:inset 0px 0px 1px rgba(184,166,43,1);
box-shadow:inset 0px 0px 1px rgba(184,166,43,1);
background-image: -o-linear-gradient(90deg , rgb(233,220,126) 0%, rgb(246,241,180) 100%);
background-image: -moz-linear-gradient(90deg , rgb(233,220,126) 0%, rgb(246,241,180) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(233,220,126) 0%, rgb(246,241,180) 100%);
background-image: -ms-linear-gradient(90deg , rgb(233,220,126) 0%, rgb(246,241,180) 100%);
background-image: linear-gradient(90deg , rgb(233,220,126) 0%, rgb(246,241,180) 100%);
color: #A78E0F;
text-shadow: rgba(254,252,252,0.5) 0px 1px 0px;
}

/*Hover*/
.ml-button-2:hover {
background-color: #F1F09D;
background-image: -o-linear-gradient(90deg , rgb(237,227,150) 0%, rgb(246,242,199) 100%);
background-image: -moz-linear-gradient(90deg , rgb(237,227,150) 0%, rgb(246,242,199) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(237,227,150) 0%, rgb(246,242,199) 100%);
background-image: -ms-linear-gradient(90deg , rgb(237,227,150) 0%, rgb(246,242,199) 100%);
background-image: linear-gradient(90deg , rgb(237,227,150) 0%, rgb(246,242,199) 100%);
}

/*Active*/
.ml-button-2:active {
background-color: #D4CC56;
-moz-box-shadow:inset 0px 0px 5px rgba(184,166,43,1);
-webkit-box-shadow:inset 0px 0px 5px rgba(184,166,43,1);
box-shadow:inset 0px 0px 5px rgba(184,166,43,1);
background-image: -o-linear-gradient(90deg , rgb(246,241,180) 0%, rgb(233,220,126) 100%);
background-image: -moz-linear-gradient(90deg , rgb(246,241,180) 0%, rgb(233,220,126) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(246,241,180) 0%, rgb(233,220,126) 100%);
background-image: -ms-linear-gradient(90deg , rgb(246,241,180) 0%, rgb(233,220,126) 100%);
background-image: linear-gradient(90deg , rgb(246,241,180) 0%, rgb(233,220,126) 100%);
text-shadow: none;
}


</style>

<body bgcolor="#000000">

<div id="content">
<a class="ml-button-1" href="../trangchu/">Trang chủ</a>
<br />
<a class="ml-button-2" href="../forum/">Forum</a>
</div>

</body>
</html>


Nhưng khi view bằng mobile thì không nhìn thấy 2 button kia (Trang chủ, Forum) đâu.

Em là dân ngoại đạo nên nhờ các anh giúp cho.
Hoặc giúp em làm 1 giao diện mobile đơn giản chỉ là 2 button kia thôi ạ. Và khi view bằng mobile thì nó tự chuyển sang giao diện mobile.
Cảm ơn các anh nhiều.
tuine2334
26-08-2013, 16:31
Không thấy là tại vì kích thước trang wap của bạn là 600px. Trong đó mobile của bạn có kích màn hình nhỏ hơn nên không thể xem được nội dung đó đầy đủ.

Cách khắc phục là điều chỉnh đơn vị px thành %. Như thể css sẽ dựa vào màn hình trình duyệt mà cho ra kích thước vừa đủ.

P/s: Nhiều khi mobile của bạn quá cũ nên không thể hỗ trợ các trình duyệt mạnh mẽ sau này. Ví dụ như bạn đang sài opera mini...Code CSS 3 nên không hiểu.