在Chrome中响应，但在移动设备上无响应 [英] Responsive in Chrome, but not on mobile
本文介绍了在Chrome中响应，但在移动设备上无响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用WP-骨架，并修改它以适应我的网站。但是，我的网站目前只在我的电脑上用Chrome浏览器响应，而不是在我的手机上响应。
这些div正在改变Chrome的大小，例如首页< （屏幕尺寸为48px时为420像素，屏幕尺寸为960像素时为300像素）。在我的手机上，一切都像基本的960像素网格一样，并且在当前屏幕尺寸之后不会调整大小。
您可以帮我吗？
/ *
主题名称：WP-Skeleton
主题URI：https://github.com/wycks/WP -Skeleton-Theme
作者：Wycks
作者URI：wpsecure.net
描述：基于Dave Gamache的getskeleton.com
响应式Bare Bones框架版本：1.0
许可：http://www.opensource.org/licenses/mit-license.php。
标签：响应式，网格，移动，框架，裸骨，白色，最小
这个主题与WordPress一样，在GPL下获得许可。
使用它可以让事情变得更酷，玩得开心，并将你与别人学到的东西分享。
* /
/ *目录
=========================== =======================
#Base 960网格
#Tablet（人像）
#Mobile（人像）
#Mobile（风景）
#Clearing * /
/ * #Base 960网格
======== ========================================== * /
.container {position：relative;宽度：960px;保证金：0汽车;填充：0; }
.column，.columns {float：left;显示：内联; margin-left：10px; margin-right：10px; }
.row {margin-bottom：20px; }
/ *嵌套的列类* /
.column.alpha，.columns.alpha {margin-left：0; }
.column.omega，.columns.omega {margin-right：0; }
/ *基本网格* /
.container .one.column {width：40px; }
.container .two.columns {width：100px; }
.container .three.columns {width：160px; }
.container .four.columns {width：220px; }
.container .five.columns {width：280px; }
.container .imagebox.columns {width：300px; margin-left：30px; margin-top：30px;}
.container .six.columns {width：340px; }
.container .seven.columns {width：400px; }
.container .eight.columns {width：460px; }
.container .nine.columns {width：520px; }
.container .ten.columns {width：580px; }
.container .eleven.columns {width：640px; }
.container .twelve.columns {width：700px; }
.container .thirteen.columns {width：760px; }
.container .fourteen.columns {width：820px; }
.container .fifteen.columns {width：880px; }
.container .sixteen.columns {width：940px; }
.container .one-third.column {width：300px; }
.container .two-thirds.column {width：620px; }
/ *抵消* /
.container .offset-by-one {padding-left：60px; }
.container .offset-by-two {padding-left：120px; }
.container .offset-by-three {padding-left：180px; }
.container .offset-by-four {padding-left：240px; }
.container .offset-by-five {padding-left：300px; }
.container .offset-by-six {padding-left：360px; }
.container .offset-by-seven {padding-left：420px; }
.container .offset-by-eight {padding-left：480px; }
.container .offset-by-nine {padding-left：540px; }
.container .offset-by-ten {padding-left：600px; }
.container .offset-by-eleven {padding-left：660px; }
.container .offset-by-twelve {padding-left：720px; }
.container .offset-by-thirteen {padding-left：780px; }
.container .offset-by-fourteen {padding-left：840px; }
.container .offset-by-fifteen {padding-left：900px; }
/ * #Tablet（人像）
====================== ============================ * /
/ *注意：设计宽度为768px * /
@media仅限屏幕和（最小宽度：768px）和（最大宽度：959px）{
.container {width：768px; }
.container .column，
.container .columns {margin-left：10px; margin-right：10px; }
.column.alpha，.columns.alpha {margin-left：0; margin-right：10px; }
.column.omega，.columns.omega {margin-right：0; margin-left：10px; }
.container .one.column {width：28px; }
.container .two.columns {width：76px; }
.container .three.columns {width：124px; }
.container .four.columns {width：172px; }
.container .five.columns {width：220px; }
.container .imagebox.columns {width：240px; margin-left：23px; margin-top：23px; }
.container .six.columns {width：268px; }
.container .seven.columns {width：316px; }
.container .eight.columns {width：364px; }
.container .nine.columns {width：412px; }
.container .ten.columns {width：460px; }
.container .eleven.columns {width：508px; }
.container .twelve.columns {width：556px; }
.container .thirteen.columns {width：604px; }
.container .fourteen.columns {width：652px; }
.container .fifteen.columns {width：700px; }
.container .sixteen.columns {width：748px; }
.container .one-third.column {width：236px; }
.container .two-thirds.column {width：492px; }
/ *抵消* /
.container .offset-by-one {padding-left：48px; }
.container .offset-by-two {padding-left：96px; }
.container .offset-by-three {padding-left：144px; }
.container .offset-by-four {padding-left：192px; }
.container .offset-by-five {padding-left：240px; }
.container .offset-by-six {padding-left：288px; }
.container .offset-by-seven {padding-left：336px; }
.container .offset-by-eight {padding-left：348px; }
.container .offset-by-nine {padding-left：432px; }
.container .offset-by-ten {padding-left：480px; }
.container .offset-by-eleven {padding-left：528px; }
.container .offset-by-twelve {padding-left：576px; }
.container .offset-by-thirteen {padding-left：624px; }
.container .offset-by-fourteen {padding-left：672px; }
.container .offset-by-fifteen {padding-left：720px; }
}
/ * #Mobile（肖像）
===================== ============================= * /
/ *注意：设计宽度为320px * /
@media仅限屏幕和（最大宽度：767px）{
.container {width：300px; }
.columns，.column {margin：0 10px; }
.container .one.column，
.container .two.columns，
.container .three.columns，
.container .four.columns，
.container .five.columns，
.container .six.columns，
.container .seven.columns，
.container .eight.columns，
.container。 nine.columns，
.container .ten.columns，
.container .eleven.columns，
.container .twelve.columns，
.container .thirteen.columns，
.container .fourteen.columns，
.container .fifteen.columns，
.container .sixteen.columns，
.container .one-third.column，
.container .two-thirds.column {width：280px; }
.container .imagebox.columns {width：300px; margin-left：0px; margin-top：5px; clear：both;}
/ *抵消* /
.container .offset-by-one，
.container .offset-by-two，
.container .offset-by-three，
.container .offset-by-four，
.container .offset-by-five，
.container .offset-by-6，
.container .offset-by-7，
.container .offset-by-eight，
.container .offset-by-nine，
.container .offset-by-10，
.container .offset-by-11，
.container .offset-by-12，
.container .offset-by-13，
.container .offset-by-14，
.container .offset-by-fifteen {padding-left：0; }
/ *现在留下的浮动菜单* /
.menu ul {float：left;}
}
/ * #Mobile（风景）
================================== ================ * /
/ *注意：设计宽度仅为480px * /
@media屏幕和（最小宽度：480px）和（最大宽度：767px）{
.container {width：420px; }
.columns，.column {margin：0 10px; }
.container .one.column，
.container .two.columns，
.container .three.columns，
.container .four.columns，
.container .five.columns，
.container .six.columns，
.container .seven.columns，
.container .eight.columns，
.container。 nine.columns，
.container .ten.columns，
.container .eleven.columns，
.container .twelve.columns，
.container .thirteen.columns，
.container .fourteen.columns，
.container .fifteen.columns，
.container .sixteen.columns，
.container .one-third.column，
.container .two-thirds.column {width：400px; }
.container .imagebox.columns {width：420px; margin-top：10px; clear：both;}
/ *现在留下的浮动菜单* /
.menu ul {float：left;}
}
/ * #Clearing
========================================= ========= * /
/ *自清真善良* /
.container：after {content：\0020;显示：块;身高：0;明确：两者;知名度：隐藏; }
$ b $ / *在父级使用clearfix类来清除嵌套列，
或将< div class =row> * /
.clearfix：before，
.clearfix：after，
.row：before，
.row：after {
content：'\0020';
display：block;
overflow：hidden;
可见性：隐藏;
width：0;
height：0; }
.row：after，
.clearfix：after {
clear：both; }
.row，
.clearfix {
zoom：1; }
/ *您也可以使用< br class =clear/>清除列* /
.clear {
clear：both;
display：block;
overflow：hidden;
可见性：隐藏;
width：0;
height：0;
}
img.scale-with-grid {
最大宽度：100％;
height：auto; }
/ * #Base资产净值960网格
====================== ============================ * /
nav {
padding-top：10px;
text-align：center;
margin：0 auto;
}
nav ul {
display：inline;
list-style-type：none;
padding-left：0px;
}
nav li {
display：inline;
padding-left：55px;
padding-right：55px;
font-family：Gotham，Helvetica Neue，Helvetica，Arial，sans-serif;
text-transform：大写;
font-weight：300;
}
nav li a：hover {
color：＃808080;
-webkit-transition：全部0.3s缓出;
}
nav li a {
color：＃282828;
text-decoration：none;
font-size：medium;
}
.nav-button {display：none; }
.logoo {display：none; }
}
@media仅屏幕和（最小宽度：768px）和（最大宽度：959px）{
nav li {
padding-left： 20像素;
padding-right：20px;
@media仅屏幕和（最小宽度：0px）和（最大宽度：767px）{
/ *导航按钮
----------------------------------------- --------------- * /
nav ul img {
display：none;
}
.logoo {
display：inline;
width：150px;
margin-top：0px;
margin：0 auto;
}
.nav-button {
display：block;
位置：绝对;
top：7px;
left：7px;
width：50px;
height：35px;
background：url（'../ images / menu-icon-large.png'），-webkit-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background：url（'../ images / menu-icon-large.png'），-moz-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background：url（'../ images / menu-icon-large.png'），-ms-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background：url（'../ images / menu-icon-large.png'），-o-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background-position：center center;
背景重复：不重复;
background-size：21px，100％;
光标：指针;
border：0无;
border-bottom：1px solid rgba（255,255,255，.1）;
box-shadow：0 0 4px rgba（0,0,0，.7）inset;
border-radius：5px;
z-index：999;
text-indent：-9999px;
}
.nav-button：hover {
background-color：rgba（0,0,0，.1）;
}
.nav-button.open {
background：url（'../ images / close-icon-large.png'），-webkit-linear-gradient（top，rgba （0,0,0,0），rgba（0,0,0，.2））;
background：url（'../ images / close-icon-large.png'），-moz-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background：url（'../ images / close-icon-large.png'），-ms-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background：url（'../ images / close-icon-large.png'），-o-linear-gradient（top，rgba（0,0,0,0），rgba（0,0， 0，0.2））;
background-position：center center;
背景重复：不重复;
background-size：21px，100％;
}
/ *导航栏
----------------------------- --------------------------- * /
body {padding-top：50px; }
nav {
width：100％;
float：none;
背景颜色：＃b0b0b0; / *更改菜单颜色* /
background-image：-webkit-linear-gradient（top，rgba（0,0,0,0），rgba（0,0,0，.2））;
background-image：-moz-linear-gradient（top，rgba（0,0,0,0），rgba（0,0,0，.2））;
background-image：-ms-linear-gradient（top，rgba（0,0,0,0），rgba（0,0,0，.2））;
background-image：-o-linear-gradient（top，rgba（0,0,0,0），rgba（0,0,0，.2））;
display：block;
height：50px;
保证金：0;
padding：0;
overflow：hidden;
box-shadow：0 1px 2px rgba（0,0,0，.6）;
位置：绝对;
left：0px;
z-index：998;
明确：两者;
}
nav li {
display：none;
宽度：100％;
}
nav li a {
display：block;
宽度：90％;
填充：10px 5％;
font-size：14px;
font-weight：bold;
text-shadow：-1px -1px 0 rgba（0,0,0，.15）;
颜色：白色;
text-decoration：none;
border-bottom：1px solid rgba（0,0,0，.2）;
border-top：1px solid rgba（255,255,255，.1）;
}
nav li a：hover {
background-color：rgba（0,0,0，.5）;
border-top-color：transparent;
}
导航> li：第一个孩子{
border-top：1px solid rgba（0,0,0，.2）;
}
/ *切换导航栏打开* /
nav.open {
height：auto;
padding-top：50px;
}
nav.open li {
display：block;
}
/ *子菜单 - 可选.parent类表示下拉菜单* /
nav> li：悬停> a {
background：rgba（0,0,0，.5）;
border-bottom-color：transparent;
}
nav li.parent> a：在{
content：▼;
color：rgba（255,255,255，.5）;
float：right;
}
nav li.parent> a：hover {
background：rgba（0,0,0，.75）;
}
nav li ul {
display：none;
background：rgba（0,0,0，.5）;
border-top：0无;
padding：0;
}
nav li ul a {
border：0 none;
font-size：12px;
填充：10px 5％;
font-weight：normal;
}
nav li：hover ul {
display：block;
border-top：0无;
}
}
解决方案
确保添加了视口元标记。至少，您需要以下内容：
< meta name =viewportcontent =width = device -width>
其他选项也可用。请参阅下面的参考链接以获取更多信息。 Mozilla开发者网络 - 视口元标记
I am using WP-skeleton, and modifing it to fit into my website. However, my website is currently only responsive in Chrome on my PC, and not on my phone.
The divs are changing the size Chrome, e.g the pictures on front page (class imagebox) are 420px when screen size is 48px, and 300px when screen size is 960px. On my phone everything is like the base 960px grid all the time, and does not resizes after the current screen size.
Could you guys help me out?
/*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 30px; margin-top: 30px;}
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .imagebox.columns { width: 240px; margin-left: 23px; margin-top: 23px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 0px; margin-top: 5px; clear: both;}
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 400px; }
.container .imagebox.columns {width: 420px; margin-top: 10px; clear: both;}
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Base NAV 960 Grid
================================================== */
nav {
padding-top: 10px;
text-align:center;
margin: 0 auto;
}
nav ul {
display: inline;
list-style-type: none;
padding-left: 0px;
}
nav li {
display: inline;
padding-left: 55px;
padding-right: 55px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 300;
}
nav li a:hover {
color:#808080;
-webkit-transition: all 0.3s ease-in-out;
}
nav li a {
color: #282828;
text-decoration: none;
font-size: medium;
}
.nav-button { display: none; }
.logoo { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav li {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
/* Navigation Button
-------------------------------------------------------- */
nav ul img {
display: none;
}
.logoo {
display: inline;
width: 150px;
margin-top: 0px;
margin: 0 auto;
}
.nav-button {
display: block;
position: absolute;
top: 7px;
left: 7px;
width: 50px;
height: 35px;
background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
border-radius: 5px;
z-index: 999;
text-indent: -9999px;
}
.nav-button:hover {
background-color: rgba(0,0,0,.1);
}
.nav-button.open {
background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
}
/* Navigation Bar
-------------------------------------------------------- */
body { padding-top: 50px; }
nav {
width: 100%;
float: none;
background-color: #b0b0b0; /* change the menu color */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
display: block;
height: 50px;
margin: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.6);
position: absolute;
left: 0px;
z-index: 998;
clear: both;
}
nav li {
display: none;
width: 100%;
}
nav li a {
display: block;
width: 90%;
padding: 10px 5%;
font-size: 14px;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0,0,0,.15);
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
border-top: 1px solid rgba(255,255,255,.1);
}
nav li a:hover {
background-color: rgba(0,0,0,.5);
border-top-color: transparent;
}
nav > li:first-child {
border-top: 1px solid rgba(0,0,0,.2);
}
/* Toggle the navigation bar open */
nav.open {
height: auto;
padding-top: 50px;
}
nav.open li {
display: block;
}
/* Submenus – optional .parent class indicates dropdowns */
nav > li:hover > a {
background: rgba(0,0,0,.5);
border-bottom-color: transparent;
}
nav li.parent > a:after {
content: "▼";
color: rgba(255,255,255,.5);
float: right;
}
nav li.parent > a:hover {
background: rgba(0,0,0,.75);
}
nav li ul {
display: none;
background: rgba(0,0,0,.5);
border-top: 0 none;
padding: 0;
}
nav li ul a {
border: 0 none;
font-size: 12px;
padding: 10px 5%;
font-weight: normal;
}
nav li:hover ul {
display: block;
border-top: 0 none;
}
}
解决方案
Make sure you add the viewport meta tag. At the bare minimum, you'll need the following:
<meta name="viewport" content="width=device-width">
Additional options are available as well. Check the reference link below for more information.
Reference: Mozilla Developer Network - Viewport Meta Tag
这篇关于在Chrome中响应，但在移动设备上无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
