title: CSS definitions in style tag are not loaded in mobile browser
body: <p>I'm on a single-page responsive application using angularjs and php where I embedded all my JavaScript and CSS codes in <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> 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?</p>
  
  <p>The page structure is shown below.</p>
  
  <pre><code>&lt;html class="no-js lt-ie9" lang="en" &gt; 
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;meta name="fragment" content="!" /&gt;
      &lt;title&gt;Project Title&lt;/title&gt;
      &lt;style&gt;
          .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 &gt; a {  
              background: none;
          }
          .top-bar-section ul li:hover &gt; a {
              background: none;
              color: white; }
          .top-bar-section ul li.active &gt; 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 &gt; li &gt; a {
              color: #000;
              font-size: 0.8125em;
  
          }
          .inline-list &gt; li &gt; 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 &gt; 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 &gt; .feature-img{background-image:url(/img/features-bg-sprite-hover-compressed.png)}
          .feature-box:hover &gt; .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 &gt; section &gt; .title,
          .section-container.accordion &gt; .section &gt; .title {
              background-color: #000;
              border: solid 1px #00627F;
          }
          .section-container.accordion &gt; section &gt; .title a,
          .section-container.accordion &gt; .section &gt; .title a {
              padding: 0.9375em;
              color: #fff;
              font-size: 0.875em;
              background: none; }
          .section-container.accordion &gt; section &gt; .title:hover,
          .section-container.accordion &gt; .section &gt; .title:hover {
              background-color: #666; }
          .section-container.accordion &gt; section &gt; .content,
          .section-container.accordion &gt; .section &gt; .content {
              padding: 0.9375em;
              background-color: #37414B;
              border: solid 1px #00627F;
              color:#fff; }
  
  
          .section-container.accordion &gt; section.active &gt; .title,
          .section-container.accordion &gt; .section.active &gt; .title {
              background: none; }
  
          .section-container.accordion &gt; section.active &gt; .title a,
          .section-container.accordion &gt; .section.active &gt; .title a {
              color: #fff; }
          .section-container.accordion {
              border-top: 1px solid #00627F; }
          .section-container.accordion &gt; section &gt; .title,
          .section-container.accordion &gt; .section &gt; .title {
              background-color: none;
              cursor: pointer;
              border: solid 1px #00627F; }
          .section-container.accordion &gt; section &gt; .title a,
          .section-container.accordion &gt; .section &gt; .title a {
              color: #fff;
          }
          .section-container.accordion &gt; section &gt; .title:hover,
          .section-container.accordion &gt; .section &gt; .title:hover {
              background-color: none; }
          .section-container.accordion &gt; section &gt; .content,
          .section-container.accordion &gt; .section &gt; .content {
              padding: 0.9375em;
              background-color: none;
              border: solid 1px #00627F; }
          .section-container.accordion &gt; section.active &gt; .title,
          .section-container.accordion &gt; .section.active &gt; .title {
              background: none; }
          .section-container.accordion &gt; section.active &gt; .title a,
          .section-container.accordion &gt; .section.active &gt; .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;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div as-header&gt;&lt;/div&gt;
      &lt;div as-left-bar&gt;&lt;/div&gt;
      &lt;div as-alert&gt;&lt;/div&gt;
      &lt;div ng-view id="ng-view" style="padding-top: 3px;  margin-top: -10px; padding-bottom:33px;"&gt;
          &lt;div style="width: 80%; margin: 70px auto;text-align: center"&gt;
              &lt;img src="img/ajax-loader.gif" style="margin-bottom: 10px;"/&gt;
              &lt;div style="height: 15px; width: 40%; border: #333 solid 2px; margin: 0 auto;" &gt;
                  &lt;div id="loadingBar" style="background: #006077; width: 0%; height: 11px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;div as-footer&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt; 
         &lt;?php echo $javaScript; ?&gt;; 
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>