responsive html 在我的 iphone 4s 上显示平板电脑 css 设计而不是移动设备？

Question

我使用 css 创建了一个响应式 html 网站，但是当我在 iphone 4s 上打开它时，它显示的是我为平板电脑而不是移动设备设置的中等分辨率？有人知道出了什么问题吗？下面是我的代码（抱歉有很多）

@charset "utf-8";
/* CSS Document */
/* low res or phone */
@media only screen and (max-width: 799px) {
 
 
 * 
{
 background-color:#eae9e9;
}
 
.LoginStuff li
{
 display: inline;
 float: right!important;
 position:relative;
 top: -50px;
 right: 10px;
}

.reg1 a
{
 border-radius: 0px 3px 3px 0px;
 border-left-width: 1px;
 border-left-style:solid;
 border-left-color:#ce542c;
 padding: 5px 5px;
 font-size:15px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
}

.log1 a
{
 border-radius: 3px 0px 0px 3px;
 border-right-width: 0.5px;
 border-right-style:solid;
 border-right-color:#ce542c;
 padding: 5px 12px;
 font-size:15px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
}

.nav
{
 visibility: hidden;
}


/*start menu*/

.clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background-color:#f7cf1c;
}
 
.menu {
    width:100%;
    margin:0px auto;
 border-radius:3px 3px 3px 3px;
}
 
.menu li {
    margin:0px;
    list-style:none;
    font-family:"Alfa Slab One";
}
 
.menu a {
    transition:all linear 0.15s;
    color:#fff;
 background-color:#f7cf1c;
 text-decoration:none;
 margin-right:auto;
 margin-left:auto;
 position:relative;
 left:0px;
}
 
 
.menu .arrow {
    font-size:15px;
    line-height:0%;
 background-color:#f7cf1c;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    display:inline-block;
    position:relative;
    font-size:19px;
}
 
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
 position:relative;
 left:50px;
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:218%;
    padding:5px 0px;
    position:absolute;
 right:-140px;
    top:100%;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background-color:#f7cf1c;
 border-radius: 0px 0px 3px 3px;
}
 
.sub-menu li {
    display:block;
    font-size:18px;
}
 
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
 
 

/*finish menu*/

.thumbnail
{
 width:50%;
 height:50%; 
}

.topnav
{
 margin-bottom: 10px;
}

.mobistrip
{
 width: 200px;
 height: 200px;
 margin-right:auto;
 margin-left:auto;
 background-color:#f7cf1c;
 position:relative;
 left: 0px;
}

.createYearbook
{
 position:relative;
 top:-80px;
 left:0px;
 margin-right:auto;
 margin-left:auto;
 padding-bottom:20px;
 width:100%;
 height:50px;
 font-family:"Alfa Slab One";
 font-size: 15px;
 font-weight:lighter;
 text-align:center
}

.createYearbook a
{
 color: #000;
 margin-right:auto;
 margin-left:auto;
 text-decoration:none;
 background-color:#ce542c;
 padding: 5px 15px;
 border-radius: 3px 3px 3px 3px;
}

.continue
{
 position:relative;
 left:0px;
 top:-80px;
 margin-right:auto;
 margin-left:auto;
 width:100%;
 height:50px;
 text-align:center;
}

.continue a
{
 font-size:24px;
 font-family:Arial;
 font-weight:bolder;
 color: #fff;
 background-color:#ce542c;
 text-decoration:none;
 padding: 10px 8.5px; 
 border-radius: 3px 3px 3px 3px;
 margin-right:auto;
 margin-left:auto;
}

.undernav li
{
 position:relative;
 top: -150px;
 display:inline; 
 height: 50px;
 margin-right:auto;
 margin-left:auto;
}


.ach
{
 width:100%;
 height:80px;
 padding-top:10px;
 padding-bottom:10px;
 position:relative;
 left:-20px;
 top: 90px;
 margin-right:auto;
 margin-left:auto;
}

.ach a
{
 margin-right:auto;
 margin-left:auto;
 font-family:Arial;
 font-size:15px;
 color:#4e4d4d;
 font-weight:bold;
 text-decoration:none;
 padding-right: 25px;
 padding-left: 25px;
 padding-bottom:20px;
 border-bottom-width:8px;
 border-bottom-color:#4e4d4d;
 border-bottom-style:solid;
}


.jumbotron
{
 visibility: hidden; 
 padding: 0px;
}


/*choose size Stuff*/
.ChooseSizeA2
{
 width:237px;
 font-family:Arial;
 font-size:15px;
 color:#4e4d4d;
 font-weight:bold;
 background-color:#fff;
 position:relative;
 bottom: 980px;
 margin-right:auto;
 margin-left:auto;
}

.ChooseSize
{
 align-content:center;
 background-color:#fff;
}

.picksize
{
 position:relative;
 bottom:980px;
 margin-right:auto;
 margin-left:auto;
}

.sizepics
{
 padding-bottom: 10px;
}

.sizepics img
{
 width:60%;
 height:60%;
 background-color:#fff;
 border-width:6px;
 border-color:#f7cf1c;
 border-style:solid;
 margin-right:auto;
 margin-left:auto;
}

/* med res or ipad */
@media only screen and (min-width: 800px) and (max-width: 1439px) {
 
 
* 
{
 background-color:#eae9e9;
} 
 
.nav
{
 visibility:hidden; 
}

.LoginStuff li
{
 display: inline;
 float: right!important;
 position:relative;
 top: -50px;
 right: 10px;
}

.reg1 a
{
 border-radius: 0px 3px 3px 0px;
 border-left-width: 1px;
 border-left-style:solid;
 border-left-color:#ce542c;
 padding: 10px 10px;
 font-size:20px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
}

.log1 a
{
 border-radius: 3px 0px 0px 3px;
 border-right-width: 0.5px;
 border-right-style:solid;
 border-right-color:#ce542c;
 padding: 10px 20px;
 font-size:20px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
}

.nav
{
 visibility: hidden;
}


/*start menu*/

ul.clearfix
{
 background-color:#f7cf1c;
}

.clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background-color:#f7cf1c;
}
 
.menu {
    width:100%;
    margin:0px auto;
 border-radius:3px 3px 3px 3px;
}
 
.menu li {
    margin:0px;
    list-style:none;
    font-family:"Alfa Slab One";
 background-color:#f7cf1c;
}
 
.menu a {
    transition:all linear 0.15s;
    color:#fff;
 background-color:#f7cf1c;
 text-decoration:none;
 margin-right:auto;
 margin-left:auto;
 position:relative;
 left:0px;
}
 
 
.menu .arrow {
    font-size:15px;
    line-height:0%;
 background-color:#f7cf1c;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    display:inline-block;
    position:relative;
    font-size:19px;
}
 
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
 position:relative;
 left:80px;
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:280%;
    padding:5px 0px;
    position:absolute;
 right:-218px;
    top:100%;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background-color:#f7cf1c;
 border-radius: 0px 0px 3px 3px;
}
 
.sub-menu li {
    display:block;
    font-size:18px;
}
 
.sub-menu li a {
    padding:20px 30px;
    display:block;
}
 
 

/*finish menu*/


.topnav
{
 margin-bottom: 10px;
}


.createYearbook
{
 position:relative;
 left:-15px;
 bottom:90px;
 margin-right:auto;
 float:left;
 padding-bottom:50px;
 width:250px;
 height:8px;
 font-family:"Alfa Slab One";
 font-size: 10px;
 font-weight:lighter;
 text-align:center
}

.createYearbook h1
{
 width:260px; 
}

.createYearbook a
{
 color: #000;
 text-decoration:none;
 background-color:#ce542c;
 padding: 10px 12px;
 border-radius: 3px 3px 3px 3px;
}

.continue
{
 position:relative;
 right:17px;
 bottom: 100px;
 float:right;
 margin-left:auto;
 width:210px;
 height:70px;
 text-align:center;
}

.continue a
{
 font-size:15px;
 font-family:Arial;
 font-weight:bolder;
 color: #fff;
 background-color:#ce542c;
 text-decoration:none;
 padding: 15px 11.5px; 
 border-radius: 3px 3px 3px 3px;
}

.continue h2
{
 width:230px;
}


.undernav li
{
 display:inline;
 padding: 15px 20px; 
 height: 70px;
}

.ach
{
 width:100%;
 height:70px;
 float:right;
 padding-top:50px;
 padding-bottom:0px;
 margin-right:auto;
 margin-left:auto;
}


.ach a
{
 position:relative;
 bottom: 120px;
 right:12px;
 font-family:Arial;
 font-size:24px;
 color:#4e4d4d;
 font-weight:bold;
 text-decoration:none;
 padding: 28px 10px;
 border-bottom-width:8px;
 border-bottom-color:#4e4d4d;
 border-bottom-style:solid;
 margin-right:auto;
 margin-left:auto;
}

.circlesT
{
 visibility:hidden; 
}

.jumbotron 
{
  padding-top: 20px;
  background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
  height: 150px;
  background-repeat: no-repeat;
  background-size: 100%;
  position:relative;
  top: 100px;
}

.jumbotron .container 
{
  position: relative;
   background-color:transparent;
}


.jumbotron h1 
{
  color: #fff;
  font-size: 130%;  
  font-family:Arial;
  text-outline:#BEBEBE;
  background-color:transparent;
  padding-left:20%;
  position:relative;
  bottom:160px;
  display: inline;
  float: left!important;
  margin-right:auto;
}


/*choose size Stuff*/


.ChooseSize
{
 padding-top:100px;
 align-content:center;
}


.ChooseSizeA2
{
 width:100%;
 font-family:Arial;
 font-size:20px;
 color:#4e4d4d;
 font-weight:bold;
}

.picksize
{
 position:relative;
 left: -15;
 margin-right:auto;
 margin-left:auto;
}

.sizepics img
{
 width:40%;
 height:40%;
 background-color:#fff;
 border-width:6px;
 border-color:#f7cf1c;
 border-style:solid;
 margin-right:auto;
 margin-left:auto
}

/* high res or computer */
@media only screen and (min-width: 1440px) {
 
.menu-wrap
{
 visibility: hidden;
}

.bg
{
 background-color:#fff;
}

.filler
{
 width: 100%;
 height: 200px;
 background-color:#f7cf1c;
}

.fillera
{
 padding-top:30px;
 background-color:#fff;
}

* 
{
 background-color:#eae9e9;
}


.LoginStuff li
{
 display: inline;
 float: right!important;
 position:relative;
 top: 140px;
}

.reg1 a
{
 border-radius: 0px 3px 3px 0px;
 border-left-width: 1px;
 border-left-style:solid;
 border-left-color:#ce542c;
 padding: 14px 10px;
 font-size:18px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
 transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.reg1 a:hover
{
 border-radius: 0px 3px 3px 0px;
 border-left-width: 1px;
 border-left-style:solid;
 border-left-color:#ce542c;
 padding: 14px 10px;
 font-size:18px;
 font-family:Arial;
 font-weight:bold;
 color: #000;
 background-color:#ce542c;
 text-decoration:none;
}

.log1 a
{ 
 border-radius: 3px 0px 0px 3px;
 border-right-width: 1px;
 border-right-style:solid;
 border-right-color:#ce542c;
 padding: 14px 20px;
 font-size:18px;
 font-family:Arial;
 font-weight:bold;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
 transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.log1 a:hover
{
 border-radius: 3px 0px 0px 3px;
 border-right-width: 1px;
 border-right-style:solid;
 border-right-color:#ce542c;
 padding: 14px 20px;
 font-size:18px;
 font-family:Arial;
 font-weight:bold;
 color: #000;
 background-color:#ce542c;
 text-decoration:none;
}


.list
{
 padding-top:200px;
}

.nav{
 padding-top:5%;
}


.nav ul {
    padding-left: 0;
}

.nav a {
  padding: 30px 20px;
  font-size:22px;
  font-family:"Alfa Slab One";
  color: #fff;
  background-color:#f7cf1c;
  text-decoration:none;
  float: left!important;
  margin-right: auto;
  transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.nav a:hover
{
  padding: 30px 20px;
  font-size:22px;
  font-family:"Alfa Slab One";
  color: #000;
  background-color:#ce542c;
  text-decoration:none;
  float: left!important;
  margin-right: auto;
}

.nav li {
  display: inline;
  float: left!important;
  margin-right: auto;
}

.hide
{
visibility: hidden; 
}


.createYearbook
{
 padding-top:40px;
 width:28%;
 height:65px;
 font-family:"Alfa Slab One";
 font-weight:lighter;
 float:left;
 text-align:left;
}

.createYearbook a
{
 color:#f7cf1c;
 width:100%;
 font-size:80%;
 padding: 10px 10px;
 border-radius: 3px 3px 3px 3px;
 transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
 text-decoration:none;
}

.createYearbook a:hover
{
 color: #fff;
 width:100%;
 font-size:80%;
 background-color:#f7cf1c;
 padding: 10px 10px;
 border-radius: 3px 3px 3px 3px;
}

.undernav li
{
 display:inline;
 padding: 15px 20px; 
 height: 70px;
}


.ach
{
 position:relative;
 top:9px; 
 width:37.9;
 height:70px;
 float:right;
 margin-left:auto;
 padding-top:50px;
 padding-bottom:0px;
 background-color:transparent;
}

.ach li
{
 background-color:transparent;
}




.ach a
{
 font-family:Arial;
 font-size:140%;
 color:#4e4d4d;
 font-weight:bold;
 text-decoration:none;
 padding: 10px 1px;
 border-bottom-width:9px;
 border-bottom-color:#eae9e9;
 border-bottom-style:solid;
 transition-property:all;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.ach a:hover
{
 font-family:Arial;
 font-size:140%;
 color:#4e4d4d;
 font-weight:bold;
 text-decoration:none;
 padding: 28px 1px;
 border-bottom-width:9px;
 border-bottom-color:#4e4d4d;
 border-bottom-style:solid;
}

.ach ul
{ 
 width:350px;
 height:100%;
 position:relative;
 bottom:6px;
 background-color:transparent;
}

.continue
{
 width:350px;
 height:70px;
 float:right!important;
 padding-top:50px;
 text-align:right;
}

.continue a
{
 font-size:24px;
 font-family:Arial;
 font-weight:bolder;
 color: #fff;
 background-color:#f7cf1c;
 text-decoration:none;
 padding: 14px 10px; 
 border-radius: 3px 3px 3px 3px;
 transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.continue a:hover
{
 font-size:24px;
 font-family:Arial;
 font-weight:bolder;
 color: #000;
 background-color:#ce542c;
 text-decoration:none;
 padding: 14px 10px; 
 border-radius: 3px 3px 3px 3px;
}

.pic img
{
 padding-top: 8px;
 background-color:transparent;
}



.jumbotron {
  padding-top: 20px;
  background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
  height: 350px;
  background-repeat: no-repeat;
  background-size: 100%;
  position:relative;
  top: 130px;
}

.jumbotron .container {
  position: relative;
   background-color:transparent;
}

.jumbotron h1 
{
  color: #fff;
  font-size: 3em;
  font-family:"Alfa Slab One";
  text-outline:#BEBEBE;
  background-color:transparent;
  position:relative;
  bottom:107px;
  padding-left:50px;
  display: inline;
  float: left!important;
  margin-right: auto;
}

.circlesT ul
{
 background-color:transparent!important;
 width:100%;
 height:200%;
 float:left;
 margin-right:auto;
 margin-left:auto;
 position:relative;
 left:10%;
}

.circlesT li
{
 display:inline; 
 background-color:transparent!important;
 padding-left:2%;
 padding-right:2%;
}

.circlesT
{
 background-color:transparent!important;
 width:100%;
 position:relative;
 bottom:+30%;
}

.circlesT a
{
 background-color:transparent;
 display:inline;
 position:relative;
}

.a1
{
 display:inline;
 background-color:transparent;
 height:20%;
}

.a1 img
{
 width:15%;
 height:15%;
 background-color:transparent!important;
}

* 
{
 background-color:#eae9e9;
}

.thumbnail{
 max-width: 360px;
    margin-right: auto;
 display:inline;
 float: left!important;
}

.list
{
 padding-top:200px;
}

.mobiBG
{
 height:91px; 
 width:100%; 
 background-color:#f7cf1c;
}


/*Choose Size Stuff*/

.ChooseSize
{
 padding-top:18%;
 align-content:center;
 background-color:#fff;
}

.ChooseSize h1
{
 background-color:#fff;
}

.ChooseSizeA2
{
 width:500px;
 font-family:Arial;
 font-size:27px;
 color:#4e4d4d;
 font-weight:bold;
 background-color:#fff;
}

.picksize
{
 width:100%;
 background-color:#fff; 
}

.sizepics
{
 width:30%;
 display:inline;
 padding: 10px;
 background-color:#fff;
}

.sizepics a
{
 background-color:#fff;
 border-width:6px;
 border-color:#fff;
 border-style:solid;
}

.sizepics img
{
 background-color:#fff;
 border-width:13px;
 border-color:#fff;
 border-style:solid;
 transition-property:all;
   transition-duration: 0.3s;
   transition-timing-function: ease;
   transition-delay: 0;
}

.sizepics img:hover
{
 background-color:#fff;
 border-width:13px;
 border-color:#f7cf1c;
 border-style:solid;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">


</head>

<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
    <div class="reg1"><li class="reg"><a href="#">Register</a></li></div>
    <div class="log1"><li class="login"><a href="#">Login</a></li></div>
</ul>
</div>
</div>


<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
    <nav class="menu" align="center">
        <ul class="clearfix">
            <li>
                <a href="#" >Menu<span class="arrow">&#9660;</span></a>
 
                <ul class="sub-menu">
                    <li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/firstPage.html">Yearbooks</a></li>
                    <li><a href="#">Leaving Cards</a></li>
                    <li><a href="#">Mugs</a></li>
                    <li><a href="#">School Calendars</a></li>
                    <li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/TeacherLogin.html">Teachers Section</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
 <div class="Yearbooks"><li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/firstPage.html">Yearbooks</a></li></div>
    <div class="LeavingCards"><li><a href="#">Leaving Cards</a></li></div>
    <div class="Mugs"><li><a href="#">Mugs</a></li></div>
    <div class="SchoolCalendars"><li><a href="#">School Calendars</a></li></div>
    <div class="TeacherSection"><li><a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/TeacherLogin.html">Teachers Section</a></li></div>
</ul>
</div>


<div class="mobiBG"></div>

<div class="undernav">
<div class="createYearbook">
<h1><a href="#">Create a Yearbook</a></h1>
</div>
<div class="continue">
<h2><a href="#">Continue Your Yearbook</a></h2>
</div>
<div class="ach" align="center">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">How To</a></li>
</ul>
</div>
</div>

<div class="jumbotron">
<div class="container">
        <h1>Creating a Yearbook is Easy
        <br><br>
        Simply Choose Your Options Below.
        </h1>
      </div>
      <div class="circlesT">
      <ul>
      <div class="a1"><li>
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </li></div>
      <div class="a1"><li>
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </li></div>
      <div class="a1"><li>
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </li></div>
      <div class="a1"><li>
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </li></div>
      </ul>
      </div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2"> 
<h1 align="center">1. Choose a Size</h1>
</div>
</div>

<div class="picksize" align="center">
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/chooseCover6x8.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/chooseYearGroup.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="http://yourprintsolution.co.uk/mindfireassets/LittleChick/choosecover8x8.html" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%"></a>
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>

Answer 1

您需要记得为您的媒体查询关闭括号。

他们应该这样走...

@media only screen and (max-width: 799px) {

/*css goes here*/

}

Answer 2

您需要为手机添加 ViewPort 元标记：

<meta name="viewport" content="width=device-width, initial-scale=1" />

responsive html 在我的 iphone 4s 上显示平板电脑 css 设计而不是移动设备？

responsive html shows a tablet css design instead of the mobile when on my iphone 4s?

html

css

iphone

responsive-design

mobile-website