我正在使用AngularJS和PHP进行单页响应应用程序，在该应用程序中，我分别将所有JavaScript和CSS代码嵌入<script>和<style>标签中。它可以在桌面浏览器上完美工作，但在移动浏览器中具有有趣的行为。我该怎么办来解决这个问题？
页面结构如下所示。
<html class="no-js lt-ie9" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="fragment" content="!" />
<title>Project Title</title>
<style>
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.alert-box .dismiss {
font-size: 1.375em;
padding: 5px 4px 4px;
line-height: 0;
position: absolute;
top: 0.4375em;
right: 0.3125em;
color: #333333;
opacity: 0.3; }
.alert-box .dismiss:hover, .alert-box .dismiss:focus {
opacity: 0.5; }
.top-bar {
background:none;
height:45px;
line-height: 35px;
padding-left: 1%;
padding-right: 1%;
padding-top: 3px;
z-index:100;
}
.top-bar.expanded .title-area {
background:none;
padding:5px;
}
.top-bar .name h1 a {
font-size: 1.3em;
}
.top-bar-section {
background: none;
}
.top-bar-section ul {
background: none;
}
.top-bar-section ul li > a {
background: none;
}
.top-bar-section ul li:hover > a {
background: none;
color: white; }
.top-bar-section ul li.active > a {
background: none;
color: white; }
.top-bar-section [role="separator"] {
border-bottom: solid 1px;
border-top: solid 1px #003366;}
.top-bar-section .has-form {
background:none;}
.top-bar-section .has-form a{
background:url("/img/tophd.png");}
.top-bar .toggle-topbar a {
font-size: 0.8125em;
height: 35px;
line-height: 35px; }
.inline-list{
margin-left: 10%;
margin-top: 7px;
}
.inline-list > li > a {
color: #000;
font-size: 0.8125em;
}
.inline-list > li > a:hover {
text-decoration: underline;
}
.shadow-5{
-o-box-shadow: 0 0 5px 5px #ccc;
-moz-box-shadow: 0 0 5px 5px #ccc;
-webkit-box-shadow: 0 0 5px 5px #ccc;
box-shadow: 0 0 5px 5px #ccc;
border:none;
}
.shadow-2{
-o-box-shadow: 0 0 2px 2px #ccc;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
border:none;
}
.margin10{
margin-left: 10%;
margin-right: 10%;
}
.sliderimage{
width: 100%;
}
.headercontent{
font-weight: normal;
line-height: 55px;
/*color:url("/img/tophd.png");*/
}
.pull-left{float: left;}
.content-1{
font-size: 0.8125em;
}
.pad10{
padding: 10px;
padding-left: 20px;
}
.footer{ z-index: 99999; bottom: 0px; margin-bottom: 0px;
position: absolute; bottom: 0px;
}
.bgwhite{
background: #fff;
margin-bottom: 1px;
}
.pull-right{float: right; }
.clearfix{
clear: both;
}
.padright10{padding-right: 20%}
.bgnone{background: none;}
@media only screen and (min-width: 58.75em){
.top-bar {
background:url("/img/tophd.png");
}
.top-bar.expanded {
background:url("/img/tophd.png"); }
.top-bar-section li.hover > a:not(.button) {
background:url("/img/tophd.png");
color: white;
text-decoration: underline;
}
.top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 35px;
background:none; }
.top-bar-section li a:not(.button):hover {
background:url("/img/tophd.png"); }
.companylogo{
height: 150px;
}
.icon{
height: 20px;
}
.width100{
width: 100%;
}
.ftbold{font-weight: bold}
.large-icon{ height: 40px;}
.user-meeting{height: 40px;}
.center{margin: 0px auto; text-align: center;}
.meeting-user-active{
border: 2px solid #0099ff;
}
.meeting-user{
border: 2px solid #ccc;
}
.marginbuttom5{
margin-bottom: 15px;
}
ul.right li{background:none}
ul.right li a{background:none;}
.content1{
background:#006377;
width:100%;
text-align:center;
margin-top: -10px;
padding-top:10px;}
.content1 h3{width:inherit}
.fwhite{color:#fff;
}
.fgreyblue {color:#00C5F4;}
.feature-box-color {color:#00C5F4;}
.fontlight{font-weight:lighter;}
.font16{font-size:16px}
.font18{font-size:18px}
.font10{font-size:10px;}
.font20{font-size:20px}
.font24{font-size:24px}
.font30{font-size:30px}
.font12{font-size:12px;}
.content2{text-align:center}
.feature-box{width:174px; height:181px;min-width:174px; min-height:181px;max-width:174px; max-height:181px; padding:10px; background:#333333; color: #00C5F4 !important; margin:1%; float:left; }
.feature-box:hover{background:#00C5F4; color: #000000;}
.feature-box:hover > .feature-img{background-image:url(/img/features-bg-sprite-hover-compressed.png)}
.feature-box:hover > .feature-box-color {color:#000;}
.feature-img{width:98px; height:74px;min-width:98px; min-height:74px;max-width:98px; max-height:74px; margin:20px auto; background-image:url(/img/features-bg-sprite-compressed.png)}
.feature-img-1{background-position:0px 0px; }
.feature-img-2{background-position: 98px 0px; }
.feature-img-3{background-position: 196px 0px; }
.feature-img-4{background-position: 294px 0px; }
.feature-img-5{background-position: 391px 0px; }
.feature-img-6{background-position: 490px 0px; }
.feature-img-7{background-position: 588px 0px; }
.feature-img-8{background-position: 686px 0px; }
.header{background: url("/img/tophd.png") repeat-x #006D92; }
.feature-container{max-width: 790px; margin: 0 auto}
.index-banner{padding: 0 70px;}
@media only screen {
.feature-container{max-width: 790px; margin: 0 auto}
.index-banner{padding: 0 0;}
} /* Define mobile styles */
@media (max-width: 756px) {
.feature-container{max-width: 600px; margin: 0 auto}
.index-banner{padding: 0 10px;}
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media (max-width: 1060px) {
.feature-container{max-width: 600px; margin: 0 auto}
.index-banner{padding: 0 20px;}
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media (max-width: 555px) {
.index-banner{padding: 0 10px;}
.feature-container{max-width: 400px; margin: 0 auto}
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media (max-width: 363px) {
.index-banner{padding: 0 0;}
.feature-container{max-width: 200px; margin: 0 auto}
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
.margin10{margin-top:10px}
.paddingleft{padding-left:0px}
.content3{
background:#f1f1f1;
width:100%;
text-align:center;
padding-top:10px;}
.content4{
background:#333333;
color:#fff;
width:100%;
text-align:center;
padding-top:0px; height:32px; overflow:hidden; position:absoluteb; bottom:0px;}
.content4 h5{color:#fff; font-size:12px;}
.content4 .inline-list li a {color:#fff; font-size:12px;}
.width80{min-width:70%; width:84.2%; float:left}
.width20{min-width:100px; width:15.8%; float:left; background:#006077;}
.logo-img{margin-top: -20px; }
.copyright-info{color:#fff; font-size:12px; text-align: center}
.text-center{text-align: center}
.bgBlue{background:#37414B;}
.padding0{padding:0px;}
.margin0{margin:0px;}
.section-container.accordion > section > .title,
.section-container.accordion > .section > .title {
background-color: #000;
border: solid 1px #00627F;
}
.section-container.accordion > section > .title a,
.section-container.accordion > .section > .title a {
padding: 0.9375em;
color: #fff;
font-size: 0.875em;
background: none; }
.section-container.accordion > section > .title:hover,
.section-container.accordion > .section > .title:hover {
background-color: #666; }
.section-container.accordion > section > .content,
.section-container.accordion > .section > .content {
padding: 0.9375em;
background-color: #37414B;
border: solid 1px #00627F;
color:#fff; }
.section-container.accordion > section.active > .title,
.section-container.accordion > .section.active > .title {
background: none; }
.section-container.accordion > section.active > .title a,
.section-container.accordion > .section.active > .title a {
color: #fff; }
.section-container.accordion {
border-top: 1px solid #00627F; }
.section-container.accordion > section > .title,
.section-container.accordion > .section > .title {
background-color: none;
cursor: pointer;
border: solid 1px #00627F; }
.section-container.accordion > section > .title a,
.section-container.accordion > .section > .title a {
color: #fff;
}
.section-container.accordion > section > .title:hover,
.section-container.accordion > .section > .title:hover {
background-color: none; }
.section-container.accordion > section > .content,
.section-container.accordion > .section > .content {
padding: 0.9375em;
background-color: none;
border: solid 1px #00627F; }
.section-container.accordion > section.active > .title,
.section-container.accordion > .section.active > .title {
background: none; }
.section-container.accordion > section.active > .title a,
.section-container.accordion > .section.active > .title a {
color: #fff; }
.fcolorWhite{color:#fff;}
.checkbox{color:#fff;}
.teamsearch{background:none; color:#000; width:92%;}
.profilepic{width:120px; padding:5px; background:#00C4FD;}
.profiledetail{color:#37404B; font-weight:lighter; font-size:12px;}
.pad5{padding:5px;}
.padLeft10{padding-left:10px;}
.padLeft30{padding-left:30px;}
.bgBlue-wrap{background:#00627F; color:#fff; font-size:12px;}
.profilerow{background:#37414B;}
.profilesearch{background:#EFF2EF; max-height:30px; overflow:hidden;}
.margin-10{margin-top:-10px;}
.magtop5{margin-top:10px}
.bordernone{border:none;}
.midcenter{min-height:100px; border:#21CCF3 2px solid; width:70%; margin:0px auto; margin-bottom:20px; margin-top:20px; padding:30px; text-align:center;}
.logo{height:35px;}
.help{height:25px;}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
background-color: white;
font-family: inherit;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.75);
display: block;
font-size: 0.875em;
/*margin: 0 0 1em 0;*/
margin: 0 0 0 0;
padding: 0.5em;
height: 2.3125em;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
-moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus {
-webkit-box-shadow: 0 0 5px #00CFF5;
-moz-box-shadow: 0 0 5px #00CFF5;
box-shadow: 0 0 5px #00CFF5;
border-color: #00CFF5;
background-color: #fff;
outline: none;}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="month"][disabled],
input[type="week"][disabled],
input[type="email"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
textarea[disabled] {
background-color: #dddddd; }
/* Adjust margin for form elements below */
input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
margin: 0 0 1em 0; }
.roundButton{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.fontbold{font-weight:bold;}
.vleftBar{position:absolute; top:0px; padding-top:45px; left:0px; min-height:100%; width:23%; }
.margin-20{margin-left:24%;}
.padding-left-20{padding-left:24%;}
.top-bar .name h1 {
margin-top:-5px;
}
.vrightBar1{width:76%}
@media only screen and (max-width: 1000px){
.vleftBar{position:fixed; top:0px; padding-top:45px; left:0px; min-height:100%; width:220px; z-index:-10 }
.margin-20{margin-left:223px;}
.padding-left-20{padding-left:223px;;}
.logo{height:30px; }
.site-title{font-size:20px; }
.top-bar .name h1 {
margin-top:-8px;
}
.teamsearch{background:#37414B; color:#fff; width:400px;}
vrightBar1{width:60%;}
}
@media only screen and (max-width: 700px){vrightBar1{width:40%;}
}
@media only screen and (max-width: 500px){
.vleftBar{position:relative; min-width:100%; min-height:100px; top:0px; }
.margin-20{margin-left:0px;}
.padding-left-20{padding-left:0px}
.logo{height:20px; }
.site-title{font-size:16px; }
.top-bar .name h1 {
margin-top:-8px;
}
.bgBlue-wrap{float:left; margin-left:10px;}
vrightBar1{ min-width:100%; float:left;}
}
@media only screen and (min-width: 768px){
h4 {
font-size: 1.0em;
}
}
.content-header{padding:10px;}
.nonetextshadow{
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
background-color: white;
font-family: inherit;
border: none;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 1200px){
.teamsearch{background:none; color:#000; width:90%;}}
@media only screen and (max-width: 1000px){
.teamsearch{background:none; color:#000; width:87%;}}
@media only screen and (max-width: 800px){
.teamsearch{background:none; color:#000; width:82%;}}
@media only screen and (max-width: 500px){
.teamsearch{background:none; color:#000; width:80%;}}
.button-dialog{background:#00627F; text-align:center;}
.progress-cont{background-color: #666;}
@media only screen and (max-width: 400px){
.sm-fix-modal{min-width:300px;}}
.date-complete{color:#F00; font-size:11px}
.date-uncomplete{color:#00C5F4; font-size:11px}
.date{color:#666; font-size:11px}
.profilebg { min-height:147px; height:150px; overflow:hidden; min-width:100%; background: #e8e7e7 url(/img/profile-bg.jpg) repeat;}
.circle{
height:100px;
width:100px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background:#fff;
overflow:hidden;
}
.notification{
min-height:30px;
min-width:30px;
height:30px;
width:30px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background:#ff0000;
overflow:hidden;
padding:3px;
}
.fcolordarkblue{color:#00617F}
.profile-active{background:#00C4FD;}
.bgDarkBlue{background:#00627F;}
.bgGreen{background:#19BA9A;}
.fcolorgreen{color:#19BA9A}
.fcolorgreen td{color:#19BA9A}
.bgRed{background:#F78A9D;}
.fcolorred{color:#F78A9D;}
.fcolorred td{color:#F78A9D;}
.message-icon{height:50px;}
.input-ajax-validate-loading, .input-ajax-validate-loading:focus{background-image: url(/img/ajax-loader.gif); background-position: right; background-repeat: no-repeat}
.input-ajax-validate-success, .input-ajax-validate-success:focus{background-image: url(/img/validated-ok.png); background-position: right; background-repeat: no-repeat}
.input-ajax-validate-error, .input-ajax-validate-error:focus{background-image: url(/img/validated-error.png); background-position: right; background-repeat: no-repeat}
.form-control{margin-bottom: 1em}
tr {vertical-align: top}
.pl0{padding-left: 0px;}
.ml10{padding-left: 10px;}
.user-icon{width: 64px; height: 64px;}
.mb10{margin-bottom: 10px;}
</style>
</head>
<body>
<div as-header></div>
<div as-left-bar></div>
<div as-alert></div>
<div ng-view id="ng-view" style="padding-top: 3px; margin-top: -10px; padding-bottom:33px;">
<div style="width: 80%; margin: 70px auto;text-align: center">
<img src="img/ajax-loader.gif" style="margin-bottom: 10px;"/>
<div style="height: 15px; width: 40%; border: #333 solid 2px; margin: 0 auto;" >
<div id="loadingBar" style="background: #006077; width: 0%; height: 11px;"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div as-footer></div>
<script type="text/javascript">
<?php echo $javaScript; ?>;
</script>
</body>
不太确定，但是您肯定会受到meta以下缺乏的影响，您已经添加了我看到的一个，然后将其更新到下面并检查...
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通常，移动浏览器有特殊事件，您应该记住：
- touchstart
- 触摸端
- TouchCancel
- TouchLeave
- touchmove
您可以在此处阅读更多有关它的信息
如果问题与样式和CSS有关，则应考虑使用媒体查询以最适合不同的屏幕尺寸（响应式设计）。您可以在此处阅读更多有关它的信息
希望这会有所帮助，即使非常笼统。如果您粘贴实际的CSS和脚本，并且对问题行为更为具体。
感谢您的各种评论，问题是一个奇怪的评论。但是我已经扎根了问题。问题在于CSS媒体疑问相互冲突。媒体查询CSS对移动设备的定义在某个地方被打破，并且已修复。