Hiển thị kích thước màn hình hiện tại - Công cụ thiết kế đáp ứng

Question

Tôi đang thực hiện rất nhiều phát triển thiết kế đáp ứng tại thời điểm này, cũng như tất cả các nhà phát triển front-end.

Một điều tôi muốn biết là kích thước màn hình hiện tại chính xác.

Chrome có nó: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Làm thế nào tôi có thể hiển thị các kích thước màn hình hiện tại với Firefox?

Answer 1

Câu hỏi rất cũ nhưng đáng nhắc đến.

Firefox hiện có "Responsive Design Mode" Cách tốt nhất để thực hiện thử nghiệm đáp ứng mà tôi đã thấy trên bất kỳ trình duyệt nào.

phím tắt là Cntrl+Shift+M và bạn đang ở chế độ xem di động tuyệt vời với toàn quyền kiểm soát kích thước màn hình trong khi vẫn có thể mở công cụ dev.

Update - Công cụ Chrome

của nó được một thời gian kể từ khi câu trả lời này và kể từ Firefox 's công cụ phát triển điện thoại di động đã không thay đổi một thỏa thuận toàn bộ, Google Chromes đã thay đổi một toàn bộ rất nhiều và tuyệt vời như vậy nó sẽ có vẻ ngớ ngẩn không chia sẻ cho những người chưa sử dụng nó.

Hit F12 thì đây sẽ mở ra, sau đó nhấn vào biểu tượng điện thoại di động nhỏ để đưa lên các công cụ phát triển điện thoại di động:

này sẽ mở ra các công cụ dev di động mà trông như thế này

Từ đây bạn có thể thay đổi tất cả mọi thứ, nhưng dễ dàng giữa các thiết bị với các thiết bị được xác định trước và các tác nhân người dùng tự động đặt cho bạn.

Hơn bạn có thể thay đổi mọi thứ, như chạm, vị trí địa lý, v.v.

Answer 2

Giống như FIDDLE

$(window).on('resize', showSize); 

showSize(); 

function showSize() { 
    $('#size').html('HEIGHT : '+$(window).height()+'<br>WIDTH : '+$(window).width()); 
    $('#size2').html('HEIGHT : '+screen.height+'<br>WIDTH : '+screen.width); 
} 
​ 

EDIT này: thêm kích thước màn hình là tốt, sử dụng bất cứ điều gì bạn cần!

Answer 3

Bạn có thể đặt đây làm dấu trang. Nó (hy vọng) làm việc qua trình duyệt. Nhấp vào màn hình để loại bỏ nó. http://jsfiddle.net/krWLA/8/

(function() { 
    var v=window,d=document; 
    v.onresize = function() { 
     var w = v.innerWidth ? v.innerWidth : 
       d.documentElement.clientWidth, 
      h = v.innerHeight ? v.innerHeight : 
       d.documentElement.clientHeight, 
      s = d.getElementById('WSzPlgIn'), 
      ss; 
     if (!s) { 
      s = d.createElement('div'); 
      s.id = 'WSzPlgIn'; 
      d.body.appendChild(s); 
      s.onclick = function() { 
       s.parentNode.removeChild(s) 
      }; 
      ss = s.style; 
      ss.position = 'absolute'; 
      ss.bottom = 0; 
      ss.right = 0; 
      ss.backgroundColor = 'black'; 
      ss.opacity = '.5'; 
      ss.color = 'white'; 
      ss.fontFamily = 'monospace'; 
      ss.fontSize = '10pt'; 
      ss.padding = '5px'; 
      ss.textAlign = 'right'; 
     } 
     s.innerHTML = 'w ' + w + '<br />h ' + h; 
    }; 
})()​