vấn đề với truy vấn phương tiện CSS (thanh cuộn)

Question

Tôi gặp sự cố với truy vấn phương tiện css trong Firefox. Nó hoạt động chính xác trong Chrome như tôi đã tạo hai DIV và muốn có một thanh cuộn. Nếu tôi giảm kích thước màn hình của firefox tối đa 800px thì cả hai DIV đều bị thu gọn và sau khi một số pixel truy vấn phương tiện hoạt động nhưng điều đó không xảy ra trong Chrome.

séc fiddle này trình duyệt dựa http://jsfiddle.net/RMvqC/2/

Answer 1

Firefox & Webkit làm cho thanh cuộn cách khác nhau. Trong Firefox, MediaQuery được coi là chiều rộng của thanh cuộn có kích thước 15px với chiều rộng màn hình, nhưng trong các trình duyệt dựa trên Webkit, nó không được coi là thanh cuộn có chiều rộng màn hình. Vì vậy, đó là lý do tại sao các DIV nổi được thu gọn trong Firefox.

Tôi đã làm một số thứ với css có thể giúp bạn. (kiểm tra this fiddle)

 html { 
      /* force scrollbars */ 
      height: 101%; 
     } 
     body { 
      margin: 0; 
      padding:0; 
      white-space:nowrap; 
     } 
     #box1, 
     #box2 { 
      display:inline-block; 
      width: 400px; 
      height: 200px; 
      vertical-align:top; 
      white-space:normal; 
     } 
     #box1 { 
      background: #ce0000; 
      margin-right:-5px; 
     } 
     #box2 { 
      background: #8e0000; 
     } 

     @media screen and (max-width: 799px) { 
      body { 
       white-space:normal; 
      } 
      #box1, 
      #box2 { 
       width: 300px; 
      } 
     } 

Answer 2

Bạn có thể triển khai giải pháp cho Firefox khá dễ dàng bằng cách sử dụng CSS-hack. Sau khi kết thúc nội dung của bạn trong một thêm <div> thêm dòng này để CSS của bạn:

/* Firefox-Hack */ 
body, x:-moz-any-link { 
    overflow-x: hidden; 
} 
#wrapper, x:-moz-any-link { 
    margin: 0 -7.5px; 
} 

Kiểm tra jsbin (jsfiddle là xuống ngay bây giờ)

Để có kinh nghiệm đáp ứng phong phú hơn bạn có thể thêm một truy vấn phương tiện truyền thông: another jsbin

CSS hack được tìm thấy tại paulirish.com

Answer 3

Firefox & Opera sau đặc tả W3C mà là bao gồm chiều rộng thanh cuộn trong med ia truy vấn chiều rộng (lý do có thể là để tránh vòng lặp vô hạn như được mô tả trong a comment here), trong khi Webkit không (có thể coz họ nghĩ rằng nó làm cho không có ý nghĩa)

Có một workaround (Tôi đã chỉ thử nghiệm này trên FF) , dường như nếu bạn buộc thanh cuộn hiển thị mọi lúc, thì chiều rộng giờ sẽ phù hợp với Webkit. Dưới đây là các mã:

html 
{ 
    overflow:hidden; 
    height:100%; 
} 
body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
    -webkit-overflow-scrolling:touch; /* So iOS Safari gets the inertia & rubber-band effect */ 
} 

Nếu bạn muốn áp dụng điều này để FF & Opera chỉ, bạn có thể dùng đến hacks CSS:

/* Firefox */ 
@-moz-document url-prefix() 
{ 
    html 
    { 
     overflow:hidden; 
     height:100%; 
    } 
    body 
    { 
     position:relative; 
     overflow-y:scroll; 
     height:100%; 
     /*-webkit-overflow-scrolling:touch;*/ 
    } 
} 

/* Opera */ 
x:-o-prefocus, html 
{ 
    overflow:hidden; 
    height:100%; 
} 
x:-o-prefocus, body 
{ 
    position:relative; 
    overflow-y:scroll; 
    height:100%; 
} 

Không cần phải nói, sự báo trước là thanh cuộn sẽ hiển thị mọi lúc, đó có thể là một thỏa hiệp không sao.

Answer 4

Tôi đã giải quyết vấn đề này bằng cách gọi javascript "mqGenie" trong phần đầu dự án của tôi.

Hiện tại, độ rộng của truy vấn phương tiện của tôi hoạt động tốt (có cùng giá trị) trên Chrome, Safari, Firefox và IE có hoặc không có scroolbars.

javascript này Điều chỉnh các truy vấn phương tiện CSS trong trình duyệt bao gồm chiều rộng thanh cuộn trong chiều rộng khung nhìn để chúng kích hoạt ở kích thước dự định.

Bạn có thể tải về từ địa chỉ này:

http://stowball.github.io/mqGenie/

Answer 5

Đây là ngoại biên có liên quan, nhưng tôi đã tìm ra cách để phát hiện phương tiện truyền thông truy vấn của trình duyệt được thực sự sử dụng tại bất kỳ thời điểm nào, mà không cần phải muck xung quanh với thanh cuộn và chiều rộng cơ thể ...

Về cơ bản, xác định danh sách có kích thước 1 x-1 pixel ở vị trí nào đó trong cơ thể của bạn, với danh sách mục cho từng điều kiện truy vấn phương tiện bạn muốn "có thể xem".

Sau đó, trong mỗi định nghĩa truy vấn phương tiện, hãy hiển thị/ẩn mục danh sách tương ứng và sau đó chỉ cần kiểm tra xem mục đó có hiển thị từ bên trong tập lệnh của bạn hay không.

Ví dụ:

<body> 
    ... 
    <ul id="mediaQueryHelper"> 
     <li id="desktop"></li> 
    </ul> 
</body> 

<style type="text/less"> 
    #mediaQueryHelper { 
     position: absolute; 
     height: 1px; 
     width: 1px; 
     visibility: hidden; 
     top: -999px; 
     left: -999px; 
    } 

    @media screen and (min-width: 481px) 
    { 
     #desktop { display: inline; } 
    } 

    @media screen and (min-width: 320px) and (max-width: 480px) 
    { 
     #desktop{ display: none; } 
    } 

</style> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var _desktop = $("#desktop"); 

     $(window).resize(function() { 
      console.log("media-query mode: " + _desktop.is(":visible") ? "DESKTOP" : "MOBILE"); 
     }); 
    }); 
</script>