https://stackoverflow.com/questions/21405033
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianThanks for various comment, the problem is a weird one. However I've got to the root of the matter. The problem lies with conflicting CSS media queries. The media query CSS definition for mobile devices is broken somewhere and it has been fixed.
CSS definitions in style tag are not loaded in mobile browser
-
03-10-2022 - |
Pergunta
I'm on a single-page responsive application using angularjs and php where I embedded all my JavaScript and CSS codes in <script> and <style> tags respectively. It's working perfectly on desktop browser but it has funny behaviors in mobile browsers. What can I do to solve this problem?
The page structure is shown below.
<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>
Solução 3
Outras dicas
not very sure, but you certainly are getting affected by the lack of below meta, you have added one i saw, update it to the below and check...
<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">
Generally mobile browsers has special events that you should keep in mind:
- touchstart
- touchend
- touchcancel
- touchleave
- touchmove
You can read more about it here
if the problem is with the styling and css you should consider using media queries for best fit to different screen sizes (responsive design). you can read more about it here
Hope this helps, even though it is very general. if you paste the actual css and script and be more specific about the problematic behavior it would be more efficient.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
