0

在下方简短样式表的底部，您将看到我有一个媒体查询（横向 iPad），它应该更改调试器 div 的宽度。在 iPad 上以横向模式进行测试时，它会完全删除调试器 div 的所有样式。如果我删除 width 属性并将其更改为说，color: red那将正常工作。尽管在尝试更改宽度时，它只是删除了所有样式。

有任何想法吗？

谢谢

html,body {
    height: 100%;
    font-family: 'Conv_PoetsenOne-Regular', sans-serif;
}

h1 {
    text-transform: lowercase;
    text-rendering: optimizeLegibility;
    font-size: 3.5em;
    margin-bottom: 25px;
}

#map-canvas {
    height: 100%;
    width: 80%;
    float: right;
}

#debugger {
    height: 100%;
    width: 20%;
  background: #0e98f5; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #0e98f5 0%, #0794ea 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0e98f5), color-stop(100%,#0794ea)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #0e98f5 0%,#0794ea 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e98f5', endColorstr='#0794ea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: white;
  opacity: .85;
  z-index: 10;
  float: right;
  text-align: center;
  box-shadow: 0 0 10px #000;
}

#debugger-content {
    padding: 10px 25px;
}

#status {
    text-align: center;
  background: #0e98f5; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #0e98f5 0%, #0794ea 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0e98f5), color-stop(100%,#0794ea)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #0e98f5 0%,#0794ea 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #0e98f5 0%,#0794ea 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e98f5', endColorstr='#0794ea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: white;
  font-size: 2em;
  display: inline-block;
}

#status-content {
    padding-top: 24px;
    display: inline-block;
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { 
    #debugger {
        width: 50%;
    }
}
4

0 回答 0