如何使我的手機網站能夠響應其屏幕分辨率？

-1

我有一個示例代碼，我也包含這個元標記的響應函數。但也不輸出在移動站點視圖中，它會崩潰。如何使我的手機網站能夠響應其屏幕分辨率？

HTML代碼

<head> 
    <meta name="viewport" content="width=device-width, user-scalable=yes"> 
    <title>Demo</title> 
    <!-- <meta charset="utf-8" /> --> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-density, dpi=device-dpi" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
</head>

難道我錯過任何代碼？

來源

2014-02-11 KesaVan

你使用兩個_viewport_元，除去第一個。另外，你不包括jQuery.js和jQM.js. – Omar

使用媒體查詢CSS MEDIA QUERY

請找這方面的工作DEMO

<table data-role='table' id='tblSearch' data-mode='reflow' class='my-custom-breakpoint'> 
     <thead id="tbl1"> 
      <tr> 
       <th>HEADER1</th> 
       <th>HEADER2</th> 
       <th>HEADER3</th> 

      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <input type="text" id="txtInsuredName" name="txtInsuredName" /> 
       </td> 
       <td> 
        <input type="text" id="txtPolicy" name="txtPolicy" /> 
       </td> 
       <td> 
        <input type="text" id="txtOT" name="txtOT" maxlength="10" /> 
       </td> 

      </tr> 
     </tbody> 
    </table>

CSS

.width70 { 
    width: 85%; 
} 
.greybackcolor { 
    background: yellow; 
} 

@media (min-width: 400px) 
    { 
     /* Show the table header rows and set all cells to display: table-cell */ 
     .my-custom-breakpoint td, .my-custom-breakpoint th, .my-custom-breakpoint tbody th, .my-custom-breakpoint tbody td, .my-custom-breakpoint thead td, .my-custom-breakpoint thead th 
     { 
      display: table-cell; 
      margin: 0; 
     } 
     /* Hide the labels in each cell */ 
     .my-custom-breakpoint td .ui-table-cell-label, .my-custom-breakpoint th .ui-table-cell-label 
     { 
      display: none; 
     } 

    }

來源

2014-02-11 14:12:21

爲什麼投票？有人可以讓我知道這是什麼錯誤嗎？ –

：你的答案給了我幫助，我給Upvote for U ... – KesaVan

所以你可以除了它的回答 –

-1

這樣

@media (max-width: 480px) { 
//styles 
}

使用媒體查詢U可以在任一烏爾內部或外部的樣式表把這個。

來源

2014-02-11 13:09:40 user3286309

：它不工作... – KesaVan

You will have to use media rules 
<meta name="viewport" content="width=device-width"> 

    /* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

} 
/* Smartphones (portrait) ----------- */ 
@media only screen 
and (min-width: 320px) { 
#align,.pau,.slides,.slide img,#header,#footer,#content img,#content h1,.subtext,.text,#nav,.nav-dots,#responsive{width:320px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:40px;padding:2} 
#header h1 img{width:30;} 
#align{margin-top:320px;} 
#nav{margin-top:40px} 
#nav li{display:block;} 
#sidecontent{position:center;float:left;} 
#sidecontent3{margin-top:100px;float:left;} 

} 
/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width: 480px){ 
#align,.pau,.slides,.slide img,#header,#footer,#content img,#content h1,.subtext,.text,#nav,.nav-dots,#responsive{width:480px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:40px;padding:20px;} 
#header h1 img{width:50;} 
#align{margin-top:320px;} 
#nav{margin-top:40px} 
#nav li{display:block;} 
#sidecontent{margin-top:440px;position:center;float:left;} 
#sidecontent3{margin-top:440px;float:left;} 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 
/* iPads (portrait) ----------- */ 
@media only screen 
and (min-width : 768px){ 
#align,.slides,.slide img,#header,#footer, h1,#nav,.nav-dots,#responsive{width:768px;} 
.pau,.subtext,.text,#content img,#content{width:500px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:40px;padding:10px;} 
#header h1 img{width:30;} 
#align{margin-top:160px;} 
#nav{margin-top:1px} 
#nav li{display:inline;} 
#sidecontent{margin-top:500px;position:center;float:right;font-size:16px;padding:5px;} 
#sidecontent3{margin-top:600px;float:right;font-size:16px;padding:5px;} 
} 
/* iPads (landscape) ----------- */ 
@media only screen 
and (min-width : 1024px){ 
#align,.slides,.slide img,#header,#footer, h1,#nav,.nav-dots,#responsive{width:1024px;} 
.pau,.subtext,.text,#content img,#content,#content h1{width:800px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:40px;padding:20px;} 
#header h1 img{width:50;} 
#align{margin-top:160px;} 
#nav{margin-top:1px} 
#nav li{display:inline;} 
#sidecontent{margin-top:500px;position:center;float:right;font-size:16px;padding:5px;} 
#sidecontent3{margin-top:600px;float:right;font-size:16px;padding:5px;} 
} 


/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px){ 
#align,.slides,.slide img,#header,#footer, h1,#nav,.nav-dots,#responsive{width:1100px;} 
.pau,.subtext,.text,#content img,#content,#content h1{width:800px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:40px;padding:20px;} 
#header h1 img{width:50;} 
#align{margin-top:160px;} 
#nav{margin-top:1px} 
#nav li{display:inline;} 
#sidecontent{margin-top:500px;position:center;float:right;font-size:16px;padding:5px;} 
#sidecontent3{margin-top:600px;float:right;font-size:16px;padding:5px;} 
} 
/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px){ 
#align,.slides,.slide img,#header,#footer, h1,#nav,.nav-dots,#responsive{width:1600px;} 
.subtext,.text{width:800px;} 
.pau,#content img,#content,#content h1{width:1300px;} 
#align,#header,#nav,#footer{overflow-x:hidden;} 
#header{margin-top:10px;} 
#header h1{font-size:50px;padding-right:10px;margin-right:30px;} 
#header h1 img{width:50;} 
#align{margin-top:160px;} 
#nav{margin-top:1px} 
#nav li{display:inline;} 
#sidecontent{margin-top:500px;position:center;float:right;font-size:20px;padding:10px;} 
#sidecontent3{margin-top:600px;float:right;font-size:20px;padding:10px;} 
}

來源

2014-02-13 07:33:25 chris

如何使我的手機網站能夠響應其屏幕分辨率？

回答

相關問題