媒体查询工作firefox浏览器调整大小但不在手机上(browserstack)

时间:2016-05-10 10:18:15

标签: html css media-queries media

<html class="nojs html" lang="en-US">
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这是代码,但此处的媒体查询不适用于移动设备。虽然它在firefox调整大小工具上确实可以正常工作。我已尝试过各种移动设备,以及browserstack工具中的所有移动设备。     

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <link rel="canonical" href="http://Yolo4.com/index.html"/>
  <meta name="generator" content="2015.1.2.344"/>
  <title>Home</title>

  <!-- CSS -->
  <!-- IE-only CSS -->
<style type="text/css">
#u184,#u194,#u201{width:30px;position:relative}#u184,#u194,#u201,body{position:relative}#pu152-4,#u194,#u201{margin-top:43px}#u165-4,#u168-4{margin-top:24px}#u152-4,#u171-4{text-align:center}html{font-size: 8pt;min-height:100%;min-width:100%;-ms-text-size-adjust:none}a,blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,nav,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;border-width:0;border-style:solid;border-color:transparent;-webkit-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top;background-repeat:no-repeat}body{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;text-align:left;font-size:14px;line-height:17px;word-wrap:break-word;text-rendering:optimizeLegibility;-moz-font-feature-settings:'liga';-ms-font-feature-settings:'liga';-webkit-font-feature-settings:'liga';font-feature-settings:'liga';min-width:200px}.rootelem{margin-left:auto;margin-right:auto}#pu152-4,#pu184{margin-right:-10000px}.colelem{display:inline;float:left;clear:both}.clearfix:after{content:"\0020";visibility:hidden;display:block;height:0;clear:both}.accordion_wrapper,.grpelem{display:inline;float:left}.version.index{color:#000014;background-color:#0BFF23}#page,#u152-4,#u184,#u194,#u201{background-color:transparent}#muse_css_mq{background-color:#FFF}#page{z-index:1;min-height:523px;background-image:none;border-width:0;border-color:#000;width:100%;max-width:380px}#pu184{width:.01px;padding-bottom:0;margin-top:176px;margin-left:2px}#u184{z-index:22}#u201{z-index:26}#u194{z-index:24}#pu152-4{width:80.53%;margin-left:10.79%}#u152-4{z-index:2;min-height:118px;line-height:38px;font-size:32px;font-family:Abel,sans-serif;font-weight:400;position:relative;width:99.35%;margin-left:.66%}#u155-4,#u165-4,#u168-4{min-height:59px;font-size:19px;line-height:23px;font-style:italic;width:73.21%}#u155-4,#u165-4,#u168-4,#u171-4{background-color:transparent;font-family:'Open Sans',sans-serif;font-weight:400;position:relative}#u155-4{z-index:6;margin-top:7px;margin-left:14.06%}#u165-4{z-index:10;margin-left:13.08%}#u168-4{z-index:14;margin-left:12.75%}#u171-4{z-index:18;min-height:91px;line-height:41px;font-size:34px;margin-top:39px;width:100%}.html{background:url(images/layer%2001.png) left top no-repeat fixed #FFF;background-size:cover}.css3button{font-size:1.5rem;color:#050505;padding:20px 30px;background:-moz-linear-gradient(top,#871687 0,#d9b05f 99%,#a14e17 0,#bad607);background:-webkit-gradient(linear,left top,left bottom,from(#871687),color-stop(.99,#d9b05f),color-stop(0,#a14e17),to(#bad607));-moz-border-radius:14px;-webkit-border-radius:14px;border-radius:14px;border:0 solid #4d2847;-moz-box-shadow:0 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);box-shadow:0 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);text-shadow:0 -1px 0 rgba(000,000,000,.2),0 1px 0 rgba(255,255,255,.4)} 

<link href='https://fonts.googleapis.com/css?family='''Abel'''|Open+Sans:400,300italic' rel='stylesheet' type='text/css'>

@media only screen and (orientation:portrait) and (max-height: 736px) {
html {font-size: 12pt;}
}
@media only screen and (orientation:portrait) and (max-height: 667px) {
html {font-size: 16pt;}
}
@media only screen and (orientation:portrait) and (max-height: 640px) {
html {font-size: 16pt;}
}
@media only screen and (orientation:portrait) and (max-height: 563px) {
html {font-size: 8pt;}
}
@media only screen and (orientation:portrait) and (max-height: 430px) {
html {font-size: 8pt;}
}

</style>
   </head>
 <body class="museBGSize">

  <div class="clearfix borderbox" id="page"><!-- group -->
   <div class="clearfix grpelem" id="pu184"><!-- column -->
    <div class="clip_frame colelem" id="u184"><!-- image -->
     <img class="block" id="u184_img" src="images/shape%201%20copy%202.png" alt="" width="30" height="40"/>
    </div>
    <div class="clip_frame colelem" id="u201"><!-- image -->
     <img class="block" id="u201_img" src="images/shape%201%20copy%202.png" alt="" width="30" height="40"/>
    </div>
    <div class="clip_frame colelem" id="u194"><!-- image -->
     <img class="block" id="u194_img" src="images/shape%201%20copy%202.png" alt="" width="30" height="40"/>
    </div>
   </div>
   <div class="clearfix grpelem" id="pu152-4"><!-- column -->
    <div class="clearfix colelem" id="u152-4"><!-- content -->
     <p>Are you a Fighter or a Flightier?</p>
    </div>
    <div class="clearfix colelem" id="u155-4"><!-- content -->
     <p>&nbsp;The quick brown fox The quick brown fox</p>
    </div>
    <div class="clearfix colelem" id="u165-4"><!-- content -->
     <p>&nbsp;The quick brown fox The quick brown fox</p>
    </div>
    <div class="clearfix colelem" id="u168-4"><!-- content -->
     <p>&nbsp;The quick brown fox The quick brown fox</p>
    </div>
    <div class="clearfix colelem" id="u171-4"><!-- content -->
     <a href="#" class="css3button">Pick My Battle Now!</a>
    </div>
   </div>
   <div class="verticalspacer"></div>
   <script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

  </div>
  <!-- JS includes -->
   </body>
</html>
P.S在过去的30个小时里,我被困在这件事上。

0 个答案:

没有答案