Q

顯示當前屏幕大小 - 響應式設計工具

2012-12-10 33 views 10 likes

10

與所有前端開發人員一樣，我正在進行大量響應式設計開發。顯示當前屏幕大小 - 響應式設計工具

我想知道的一件事是確切的當前屏幕大小。

瀏覽器有它： https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

如何顯示與Firefox當前屏幕尺寸是多少？

2012-12-10 Jamie Hutber

+0

屏幕尺寸或瀏覽器大小？ – bfavaretto

+0

瀏覽器大小...用於響應式設計和媒體查詢 –

+0

顯示瀏覽器的大小是Opera中的一項設置，它已經存在了多年（幾乎可以肯定是在版本6中）。 – cimmanon

A

回答

16

它是一個非常古老的問題，但值得一提。

Firefox現在有「Responsive Design Mode」這是最好的做響應測試，我見過的任何瀏覽器。

快捷方式是Cntrl+Shift+M而且您在完全控制屏幕大小的同時仍然可以打開開發工具的夢幻般的移動視圖。

enter image description here

更新 - Google Chrome工具

它是自這個答案一段時間，因爲Firefox的移動開發工具，並沒有改變整個交易，Google Chromes已經改變了一大堆，並如此奇妙以至於不願意與那些尚未使用它的人分享。

命中F12那麼這將打開，然後打小手機圖標，彈出移動開發工具：

How to Enable Mobile Dev Tools on Chrome

這將打開移動開發工具，看起來像這樣 Such lovelyness it hurts

從這裏你可以改變各種各樣的東西，但很容易在設備之間通過預定義的設備和用戶代理自動爲你設置。

你可以改變更多的東西，如觸摸，地理位置等

2014-01-31 11:37:17

+0

不知道這件事。它幫助我很多。謝謝。 – 10now

5

像這樣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); 
}

編輯：增加屏幕尺寸爲好，使用任何你需要的！

2012-12-10 00:38:35 adeneo

+0

謝謝，我想寫一個插件來做這個確切的事情只顯示它很好，並在角落裏只有當調整大小....可能是我必須這樣做...但是，我真的是以一種很好的非侵入性的方式來展示你看到的。 –

+0

這只是一個小小的CSS，你會發現這部分容易，並且它的樣式，但你喜歡它？就像這樣 - > [** FIDDLE **]（http://jsfiddle.net/krWLA/4/） – adeneo

+0

你們，我幾個月前寫過一篇，但我不能爲它而煩惱，因爲它不乾淨或不錯。我只是希望有一個像我說的Chrome插件，Chrome有一個。而不是花一天時間寫這個東西。 –

1

你可以把它作爲書籤。它應該（希望）跨瀏覽器工作。點擊顯示器擺脫它。 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; 
    }; 
})()

2012-12-10 01:23:25 Stuart

相關問題