모바일 웹 사이트에서 화면 해상도를 얻으십시오.

Question

월페이퍼를 다운로드 할 섹션이있는 모바일 웹 사이트를 디자인 중입니다. 많은 사용자를 수용하기 위해 화면 해상도를 기반으로 배경 화면을 다운로드 할 수있게하려고합니다. 자바 스크립트에서 해상도를 감지하고 적절한 배경 화면을 표시하고 싶습니다. 해상도 720x1280 내가 360x567를 얻을 수있다 내 SGS3의 경우,

width = window.innerWidth || document.body.clientWidth 
height = window.innerHeight || document.body.clientHeight; 

: 이것은 온라인으로 발견하고 시도의 xD 실패한 것입니다

.

JavaScript에서 전화 해상도를 어떻게 발견해야합니까?

이

Answer 1

당신은 아마도 screen 개체를 사용할 수 있습니다

var w = screen.width; 
var h = screen.height; 

업데이트을 - window.devicePixelRatio와 함께 사용하는 것을 시도하십시오 :

var ratio = window.devicePixelRatio || 1; 
var w = screen.width * ratio; 
var h = screen.height * ratio; 

Answer 2

당신은의 화면 해상도를 감지 window.screen.width 및 window.screen.height을 사용할 수 있습니다 장치.

Answer 3

이 모빌 장치 너무

screen_width = document.documentElement.clientWidth; 
screen_heght = document.documentElement.clientHeight; 

Answer 4

켄 Fyrstenberg, 좋은 물건, 덕분에 작동합니다. 나는 가능한 모든 화면 크기와 해상도 데이터를 쉽게 찾을 수있는 방법을 찾고 있었고 그 비율이 좋은지에 대한 질문에 대답하기 위해 예를 들어 망막 디스플레이 유형의 고해상도 장치인지를 알 수있었습니다.

내가/실제 화면의 아주 좋은 감각을 얻을 우리의 실제 사용자가 실행중인 장치의 사양을 만질 수 : 터치 테스트와 함께

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch 

는이 SO 관련 확인.

웹 내용은 물론 실제 브라우저 내부 창 크기, 즉 장치에 할당 된 공간의 크기입니다. 그냥 제쳐두고, 나는 사과 장치가 세로 화면 크기를 제공하는 것처럼 보였습니다. 예를 들어 768 x 1024의 비 망막 디스플레이 iPad의 경우에는 약간의 짜증이납니다. 실제로 대부분의 사용자가 웹 및 사이트와 상호 작용합니다.

Android는 그 순간의 실제 너비/높이, 즉 가로 또는 세로 너비/높이를 제공합니다. 예를 들어

: 이것은 당신이 당신이 좋아하는 어떤 방법을 사용하여 뭔가에 전달할 수있는 클라이언트 시스템에 대한 많은 데이터를 생성

var ratio = window.devicePixelRatio || 1; 
var is_touch_device = 'ontouchstart' in document.documentElement; 
var touch_status = (is_touch_device) ? 'touch' : 'no-touch'; 
touch_status = ' ts:' + touch_status; 
var width_height = 'wh:' + screen.width + 'x' + screen.height; 
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight; 
var rw = screen.width * ratio; 
var rh = screen.height * ratio; 
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh; 
var data_string = width_height + client_width_height + ratio_width_height + touch_status; 

.

는 UPDATE : 당신이 볼 수 있듯이 세로 경우

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile 

에서, document.documentElement.clientWidth 방법은/실제 폭을보고합니다 그냥 사과 장치가 실제로 너비/높이를보고하는 방법을 찾으려면이 방법을 사용하여 몇 분이 걸렸다 풍경, 좋은 물건.