Cách nhận được độ rộng màn hình một cách đáng tin cậy Với thanh cuộn

Question

Có cách nào đáng tin cậy để cho biết chiều rộng khung nhìn của trình duyệt bao gồm thanh cuộn không, nhưng không phải phần còn lại của cửa sổ trình duyệt)?

Không ai trong số các thuộc tính được liệt kê here cho tôi biết chiều rộng của màn hình BAO GỒM scrollbar (nếu có)

Answer 1

Miễn là cơ thể 100%, document.body.scrollWidth sẽ hoạt động.

Demo: http://jsfiddle.net/ThinkingStiff/5j3bY/

HTML:

<div id="widths"></div> 

CSS:

body, html 
{ 
margin: 0; 
padding: 0; 
width: 100%; 
} 

div 
{ 
height: 1500px; 
} 

Script:

var widths = 'viewport width (body.scrollWidth): ' 
    + document.body.scrollWidth + '<br />' 
    + 'window.innerWidth: ' + window.innerWidth + '<br />'; 

document.getElementById('widths').innerHTML = widths; 

tôi đặt một div cao trong bản demo để buộc một cuộn quán ba.

Answer 2

Với jQuery bạn có thể tính toán chiều rộng thanh cuộn của trình duyệt bằng cách nhận sự khác biệt chiều rộng khi overflow: hidden được thiết lập và overflow: scroll được thiết lập . Sự khác biệt về chiều rộng sẽ là kích thước của thanh cuộn.

Đây là simple example cho biết cách bạn có thể thực hiện việc này.

Answer 3

Tôi giả sử bạn muốn biết chiều rộng khung nhìn với thanh cuộn đi kèm, bởi vì màn hình tự nó không có thanh cuộn. Trong thực tế, chiều rộng màn hình và độ phân giải sẽ là độ phân giải màn hình máy tính, vì vậy tôi không chắc chắn ý bạn là gì với chiều rộng màn hình với thanh cuộn.

Tuy nhiên, chế độ xem, khu vực chỉ có trang (và thanh cuộn) được hiển thị cho người dùng, nghĩa là không có menu trình duyệt, không có dấu trang hoặc bất kỳ thứ gì, chỉ hiển thị trang.

Giả sử bạn muốn điều đó, bạn có thể đo kích thước khung nhìn của trình duyệt của khách hàng trong khi tính đến kích thước của các thanh cuộn theo cách này.

Trước tiên, đừng quên đặt thẻ body của bạn thành 100% chiều rộng và chiều cao chỉ để đảm bảo đo lường chính xác.

body { 
width: 100%; 
// if you wish to also measure the height don't forget to also set it to 100% just like this one. 
} 

Sau đó, bạn có thể đo chiều rộng theo ý muốn.

mẫu

// First you forcibly request the scroll bars to be shown regardless if you they will be needed or not. 
$('body').css('overflow', 'scroll'); 

// Viewport width with scroll bar. 
var widthWithScrollBars = $(window).width(); 

// Now if you wish to know how many pixels the scroll bar actually has 
// Set the overflow css property to forcibly hide the scroll bar. 
$('body').css('overflow', 'hidden'); 

// Viewport width without scroll bar. 
var widthNoScrollBars = $(window).width(); 

// Scroll bar size for this particular client browser 
var scrollbarWidth = widthWithScrollBars - widthNoScrollBars; 

// Set the overflow css property back to whatever value it had before running this code. (default is auto) 
$('body').css('overflow', 'auto'); 

Hy vọng nó giúp.

Answer 4

tôi đã tìm ra cách để có được chính xác khung nhìn rộng VỚI scrollbar sử dụng một số mã từ: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Đặt này bên trong của bạn $(document).ready(function()

$(document).ready(function(){ 
    $(window).on("resize", function(){ 
     function viewport() { 
      var e = window, a = 'inner'; 
      if (!('innerWidth' in window)) { 
       a = 'client'; 
       e = document.documentElement || document.body; 
      } 
      return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
     } 
    }); 
    // Get the correct window sizes with these declarations 
    windowHeight = viewport().height; 
    windowWidth = viewport().width; 
}); 

những gì nó làm:

Khi trang của bạn đã sẵn sàng hoặc được thay đổi kích thước, hàm này tính toán chiều cao và chiều rộng cửa sổ chính xác (bao gồm ing scrollbar).

Answer 5

Bạn có thể lấy chiều rộng cửa sổ với thanh cuộn, như vậy:

function scrollbar_width() { 
      if (jQuery('body').height() > jQuery(window).height()) { 

       /* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */ 
       var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
       jQuery('body').append(calculation_content); 
       var width_one = jQuery('div', calculation_content).innerWidth(); 
       calculation_content.css('overflow-y', 'scroll'); 
       var width_two = jQuery('div', calculation_content).innerWidth(); 
       jQuery(calculation_content).remove(); 
       return (width_one - width_two); 
      } 
      return 0; 
     } 

Answer 6

Check-out vw: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

body { 
    width: 100vw; 
} 

http://caniuse.com/#search=vw

Answer 7

Hiện nay mới vw và vh Thuộc tính css3 sẽ hiển thị kích thước đầy đủ bao gồm cả thanh cuộn.

body { width:100vw; height:100vh; }

Có một số thảo luận trực tuyến nếu đây là lỗi hay không.

Answer 8

không có gì sau khi thanh cuộn để "phần còn lại của cửa sổ" là gì?

Nhưng có một cách để làm điều đó là làm cho một div bao bọc khác trong cơ thể nơi mọi thứ đi và cơ thể có overflow:none; height:100%; width:100%; trên đó, bao bọc div cũng có chiều rộng và chiều cao 100%. và tràn để cuộn. SO VỚI DOANH NGHIỆP ... chiều rộng của wrapper sẽ là chiều rộng của khung nhìn

xem ví dụ: http://jsfiddle.net/techsin/8fvne9fz/

html,body { 
    height: 100%; 
    overflow: hidden; 
} 

.wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

Answer 9

Đây là giải pháp của tôi để loại bỏ các 'cuộn bóng', bởi vì scrollWidth đã không làm việc cho tôi:

canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 
canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 

Thật dễ dàng, nhưng nó hoạt động. Đảm bảo thêm nhận xét giải thích lý do bạn chỉ định cùng một giá trị hai lần :)