Vấn đề chiều rộng màn hình khi sử dụng các trình duyệt khác nhau trên thiết bị cầm tay/thông minh

Question

Tôi đã thực hiện một kịch bản trong đó tôi phát hiện trình duyệt trên thiết bị di động và khi đúng sự thật thì chức năng JS getwidth đang được gọi và chuyển hướng khách truy cập đến một URL nhất định cơ sở chiều rộng màn hình của thiết bị. Tôi đã sử dụng phương pháp phát hiện js cơ bản tức là screen.width để phát hiện chiều rộng màn hình

Vấn đề tôi đang gặp phải là chiều rộng màn hình khác đang trở lại trong các trình duyệt khác nhau.Giống như tôi có máy tính bảng (Android 4.0.3) là 800 PX và khi tôi chạy kịch bản của tôi trên trình duyệt mặc định thì nó trả về độ rộng màn hình chính xác 800px nhưng khi tôi mở nó bằng các trình duyệt khác nhau thì chúng trở lại các độ rộng khác nhau như UC Browser là 740 PX (ISSUE 2: also when onload function i tried to return screen width on UC browser then it returns screen width as 0px and after page load when i call the same function again then it returns width=740px). trên Opera Mini sau đó nó trả về chiều rộng là 441 PX.

Vui lòng cho tôi biết đó là cách hiệu quả nhất để phát hiện chiều rộng màn hình của Thiết bị cầm tay/thông minh. Vì vậy, tôi có thể thực hiện chuyển hướng hoàn hảo trên cơ sở chiều rộng màn hình.

URL để TEST: http://radiations3.aiksite.com/home.html

Cảm ơn,

Answer 1

Hmm, có vẻ với tôi như bạn không nên sử dụng Javascript, nhưng thay vì sử dụng CSS. Bạn đã xem xét media queries chưa? Đây là cách trình duyệt nhiều nhất để phát hiện chiều rộng của màn hình và sau đó cung cấp một phong cách khác nhau cho phù hợp.

Nếu bạn không tìm cách để thay đổi phong cách, nhưng chuyển hướng như bạn nói (nếu bạn phải), sau đó tôi muốn đề nghị đoạn mã sau (thay mặt Andy Langton):

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight; 

Đây là viết tắt sẽ tạo ra hai biến, x và y, có chiều rộng và chiều cao tương ứng. Có lẽ điều này giống như những gì bạn đang tìm kiếm, nhưng trước tiên tôi khuyên bạn nên kiểm tra các truy vấn phương tiện và đảm bảo bạn không thể làm gì với CSS. Không có gì đảm bảo rằng Javascript được bật trong bất kỳ trình duyệt nào.

Answer 2

Các bạn đã thử rằng việc sử dụng jQuery và

$(window).width(); 
$(window).height(); 

Tôi chưa bao giờ có bất kỳ vấn đề khi dùng này.