Phát hiện chiều rộng màn hình cho nhiều màn hình

Question

Trang web của tôi được tối ưu hóa (với chiều rộng cố định) cho bố cục 1024x768. Tôi dự định thêm các biểu ngữ dọc ở hai bên của trang cho những người có độ phân giải rộng 1280 trở lên.

Sử dụng screen.width, tôi có thể dễ dàng thực hiện việc này. Nhưng tôi phải đối mặt với một vấn đề khi thử nó trên các máy có nhiều màn hình.

Hãy giả định rằng kịch bản dưới đây đề cập:
Monitor 1 (màn hình chính) - Độ phân giải là 1024 x 768
Monitor 2 (thứ cấp màn hình) - Độ phân giải là 1440 x 900

screen.width luôn show chiều rộng là 1024 không phân biệt màn hình tôi duyệt trang. Các giá trị được đảo ngược nếu tôi thay đổi màn hình chính thành Màn hình 2.

Đây là một vấn đề lớn đặc biệt đối với những người có độ phân giải 1024x768 là độ phân giải chính. Điều này có nghĩa là tôi có thể mất khả năng hiển thị biểu ngữ trong các trường hợp như vậy.

Tôi thực sự đánh giá cao bất kỳ trợ giúp nào về vấn đề này.

Answer 1

Cảm ơn bạn đã trả lời câu hỏi của bạn. Giúp tôi biên dịch các chức năng dưới đây mà giải quyết vấn đề cho tôi.

function getBrowserWith() 
{ 
    if(($.browser.msie == true && $.browser.version == '9.0') || $.browser.webkit == true || $.browser.mozilla == true) 
     return window.innerWidth; 
    else if(($.browser.msie == true) && ($.browser.version == '7.0' || $.browser.version == '8.0')) 
     return document.documentElement.clientWidth; 
    else 
     return screen.width; 
} 

Ghi chú quan trọng

1. jQuery 1.4+ cần
2. Lưu ý rằng các chức năng trên đã được thử nghiệm chỉ cho IE7 +, FF7 + & Chrome16 + trình duyệt.

Answer 2

Hãy thử xem window.innerWidth (chiều rộng của trang web trên màn hình) thay vì window.screen.width.

Answer 3

Đối với Javascript bạn có thể sử dụng nó theo cách này trong các mã:

var width = new Array(); var height = new Array(); 
var screens = java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getScreenDevices(); 

for(var i = 0;i<screens.length; i++){ 
    var config = screens[i].getConfigurations(); 
    var bounds = config[0].getBounds(); 
    width[i] = bounds.getWidth(); 
    height[i] = bounds.getHeight(); 
} 

Bây giờ bạn có thể sử dụng width[0], width[1] và như vậy cho Height để có được những thông tin chi tiết.

Nếu bạn muốn nhận được các cấu hình của màn hình trong đó con trỏ chuột đang chỉ:

var screen, config,width, height; 
screen = java.awt.MouseInfo.getPointerInfo().getDevice(); 
config = screen.getConfigurations(); 
width = config[0].getBounds().getWidth(); 
height = config[0].getBounds().getHeight();