Question

我有一个示例代码，我还为响应函数包含了这个元标记。但也不是在移动网站视图中输出，它就会崩溃。

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>

我错过了任何代码吗？

Answer 1

使用媒体查询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;
        }

    }

Answer 2

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;}
}

Answer 3

使用像这样的媒体查询

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

你可以把它放在你的内部或外部样式表中。

如何使我的移动网站响应其屏幕分辨率？

3 个答案: