가장 일반적인 모니터 크기. 디자이너가 모바일 장치에 대해 알아야 할 사항

기술 저널리스트는 더 이상 포스트 PC 시대에 대해 비명을 지르는 첫 해가 아니며 제조업체의 주식과 마찬가지로 전통적인 폼 팩터 컴퓨터의 판매가 급격히 감소하고 있습니다. 그러나 모바일 기기, 스마트 폰 또는 태블릿의 수가 꾸준히 증가하고 있습니다.

디자이너는 TK에 모바일 장치가 있는지 여부와 관계없이 전화를 통해 사이트를 사용할 수 있도록 레이아웃을 그려야합니다 (태블릿도 그렇습니다). 그리고 이것은 버튼이 손가락을 잡을 수 있어야한다는 것을 의미합니다. 이상적으로는 당연히 사이트에 별도의 모바일 버전이 있어야하지만 실제로 경험 한대로 대부분의 고객은 추가 자금을 할당하고 싶지 않지만 좋아하는 Apple 장치에서 작동하지 않을 경우 불만을 제기하게됩니다.

설계자들이 저를 알게 된 레이크를 상기하면서 레이아웃에서 문제를 일으키는 가장 큰 원인은 얼마나 많은 픽셀이 데스크톱에 20 "모니터보다 높은 명목상 해상도로 화면에 표시되는지에 대한 정확한 아이디어가 부족하다는 것입니다. 글쎄, 그건 괜찮아. 이건 큰 숫자의 마케팅을 계산 한거야. 이 기사는 상황을 이해하는 데 도움이 될 것입니다.

우리는 Android 및 iOS 기기에 대해 이야기하고 있으며 WP는 여전히 이국적이며 개인적인 경험이 없으면 권장 사항을 제시하지 않습니다.

HTML 문서에 모바일 브라우저에 문서를 표시하는 폭을 알려주는 메타 태그가 없으면 브라우저는 문서의 너비가 980 픽셀 인 것처럼 동작합니다. 이는 화면 폭이 320 픽셀 인 휴대 전화와 Android 및 iOS를 사용하는 10 인치 태블릿 및 웹킷의 브라우저에서 마찬가지입니다. 이 접근법은 960 픽셀의 최소 너비가있는 사이트가 콘텐츠를 쉽게 인식 할 수 있도록 작은 필드를 제공함을 의미합니다.

문서의 최소 너비가 더 크면 브라우저의 동작이 달라지기 시작합니다. iPhone / iPad의 Safari는 대부분의 경우 콘텐츠를 압축합니다. DIP는 안드로이드에 나타날 것입니다. 밀도에 영향을받지 않는 픽셀입니다. 문서의 너비가 980보다 크고 DIP에서 장치 너비보다 큰 경우 오른쪽으로 스크롤됩니다. 따라서 콘텐츠 너비가 1040 픽셀 인 사이트는 iPhone 및 iPad (1024 픽셀)에서 가로 스크롤없이 갤럭시 S3 (실제 해상도 1280x720) 또는 Nexus 7 태블릿 (실제 해상도 1280x800)과 같은 휴대 전화에서 스크롤됩니다.

그릴 결론은 무엇입니까? 데스크톱과 랩톱에 와이드 스크린 디스플레이가 풍부하지만, 960 픽셀의 그리드는 관련성을 잃지 않았습니다. 모바일 브라우저는 텍스트 블록을 장치에서 편리하게 읽을 수있는 형식 (예 : 전화의 좁은 열에 텍스트를 누르고 글꼴 높이기)에 맞추는 기능도 있습니다. 블록을 포함하는 텍스트의 높이가 엄밀하게 제한된 경우에는 작동하지 않습니다. 실제로 방문자가 휴대 기기로 계획된 경우 특히 높이가 제한되는 사이트를 만들어서는 안됩니다. 모바일 장치의 또 다른 적, 특히 전화는 위치가 고정 된 요소입니다. 예를 들어, 지금은 유행 버튼을 뒤로, 페이지에서 사용자가 지속적으로 실행됩니다. 더 나쁜 것은 - 고정 된 모자와 같이 큰 사망자입니다. 이러한 요소는 작은 화면에서 유용한 공간을 차지할뿐만 아니라 배율을 유지하는 동안 같은 위치에 유지됩니다. 문제는 모달 윈도우의 특징이기도합니다. 화면 중간에 표시되면 휴대 전화로 콘텐츠가 증가하면 상당한 손재주가 필요합니다. "소셜 네트워크에서 우리와 연락하십시오!"와 같은 팝업을 사용하면 이와 유사한 방식으로 행동 할 수 있습니다. 일반적으로 모바일 장치 사용자에게는이 팝업을 닫는 것보다 사이트를 떠나는 것이 더 쉽기 때문에 무례합니다.

몇 가지 사이트의 예를 생각해보십시오.

테이프 .ru에는 매우 적합한 모바일 버전이 있지만 실제로 자동 전환은 수행되지 않습니다. 바탕 화면 고정 메뉴에서 자동 크기 조정을 사용하여 텍스트를 클릭합니다. 사용자가 손으로 크기를 조정하거나 m을 처방하기에는 너무 게으르지 않도록 선택할 수 있습니다. url.

RBC. 일반적으로 모바일 버전도 있지만 메인 페이지에서만 전환이 수행됩니다. 직접 링크 (Google 뉴스에서 특히)는이 읽을 수없는 캔버스를 볼 수 있습니다. 방문자는 그런 위치에 체재 할 것입니까? 거의.

Supercanonical 팝업은 RBC 작풍에 갔다. 수행 방법에 대한 뛰어난 예는 필요하지 않습니다.

인탱, 어느 버전이 맞을지. 물론, 나는 메뉴에서 이것을하는 것이 왜 잘못되었는지를 완벽하게 이해했지만 어떻게 든 논할 분위기가 없었습니다. 질문은 주제가 아니라고 질문하십시오.

일반적으로 데스크톱에서 보낸 시간을 정당화하지 못하고 모바일에서 문제를 일으키는 또 다른 사항은 사용자 지정 양식 요소입니다. CSS로 구성 할 수 없다는 사실은 월드 와이드 웹 컨소시엄이 게으른 이유가 아니 었습니다.

예를 들어, 아름다운 드롭 다운 목록을 그렸습니다. 예를 들어 데스크탑 브라우저에서는 다른 모든 것처럼 보입니다. 마우스 클릭으로 열리고 휠로 스크롤됩니다. 그러나 이러한 요소를 가진 모바일 작업에서 큰 문제가 발생할 것입니다. select가 표준 인 경우 사용자는 OS에 따라 드럼 / 드롭 다운 목록이있는 시스템 창을 표시합니다.

그리고 iOS에 파일을 첨부하는 기능이 빠져 있습니다. 그리고 버튼의 표준 모양이 사용자에게 그것이 사용 중지되었다고 암시한다면, 약간의 선명한 아름다운 버튼은 귀하의 사이트에서 어떤 것이 작동하지 않는다는 느낌을 갖게 할 것입니다.

물론 모바일 장치를 정의해야하며 모바일 장치의 경우 표준 인터페이스를 변경하기위한 스크립트를 실행하지 않는 것이 이상적입니다.

모바일 브라우저의 또 다른 불쾌한 점은 현재 플러그인 글꼴을 캐시하지 않는다는 것입니다. Google Web Fonts와 연결된 모든 스타일의 동일한 PT Sans는 상당히 오래로드됩니다. 동시에 헬 베티 아 / 로보트 (Helvetica / Roboto)가 통합 된 것을 너무 많이 잃어 버리는 것은 눈에 띄지 않습니다. 사용자 정의 글꼴을로드하는 데 시간이 더 걸릴지 여부를 생각해보십시오.

모바일 장치의 크기와 해상도. 모바일 브라우저의 실제 화면 해상도와 해상도의 차이점

iPhone과 iPad는 포인트 (사과 포인트)의 개념을 사용합니다. 최대 5 개의 모델 (320 x 480 픽셀)의 아이폰 해상도. Retina Display 란 무엇입니까? Retina Display는 두 배의 픽셀 밀도를 사용합니다. 즉, 점당 4 개의 물리적 픽셀이 있습니다. 따라서 iPhone 4의 실제 디스플레이 해상도는 640 x 960 픽셀이며 여전히 320 x 480 픽셀입니다. 그러나 동시에 응용 프로그램에서 두 번 큰 이미지를 사용하기 때문에 그래픽이 더욱 자세하게 표시됩니다. iPhone 5의 경우 점수가 480에서 568로 증가했습니다. iPad의 경우 Mini를 포함한 모든 버전이 항상 1024x768입니다.

기본적으로 웹의 1 - 1 표준 그래픽 (예 : 배경 이미지)의 배율이 두 배의 형식으로 표시되며 래스터 이미지의 한 픽셀은 물리적 화면의 4 픽셀만큼 확장됩니다. 이 상황에서 고해상도 그래픽을 사용하는 방법은 다음 섹션에서 설명합니다. iOS 기기의 사용 권한에 대해 기억해야 할 중요한 점은 망막과 비 망막의 페이지가 다른 너비를 가지고 있다고 생각하지 않습니다. 아니요, 차이는 픽셀 밀도뿐입니다. 비율은 절대적으로 같습니다.

Android에서는 상황이 훨씬 더 복잡하고 정확하며 다양합니다. Android는 다양한 화면 밀도 (DPI) 개념을 사용합니다. 디스플레이의 실제 크기와 해상도가 다를 경우 점 행동 모델은 장치의 목적에 따라 다릅니다. 포인트의 아날로그는 위에서 언급 한 DIP입니다.

화면 밀도는 1입니다.이 범주에는 320x480 전화 (HTC Hero, LG Optimus One), 7 인치 태블릿 1024x600 (Samsung Galaxy Tab, Kindle Fire), 10 인치 태블릿 (Asus Transformer, Acer A500, 갤럭시 탭 10'1).

1.33의 화면 밀도는 Nexus 7과 같은 7 인치 태블릿에서 사용됩니다. 물리적 해상도는 1280x800이고 DIP에서는 960x600입니다.

화면 밀도는 1.5 - 2011 년의 고가형 휴대 전화 및 2012 년 평균, FullHD가있는 10 인치 태블릿입니다. 예를 들어, Nexus One 480x800 픽셀, 360x533 * DIP, HTC One S - 540x960 픽셀, 360x640 DIP 및 Asus Transformer Pad Infinity 1920x1200 픽셀, 1280x800 DIP.

* Android 개발자의 경우 534 개가 발견되었지만 JS를 통해 브라우저의 너비를 측정 한 결과는 정확히 533이었고 미디어 쿼리에서는이 값에 중점을 둘 가치가 있습니다.

화면 2의 밀도 - 2012 년 고가 카테고리의 전화기 및 문자 그대로 두 개의 태블릿. 예를 들어, HTC One X, Samsung Galaxy S3 - 화면 해상도는 1280x720이고 DIP 360x640 크기입니다. Google 태블릿 Nexus 10 - 2560x1600 픽셀 해상도, 1280x800 DIP.

화면 밀도 3 - FullHD 디스플레이가 적용된 2013 년 플래그십. 1920x1080 픽셀의 해상도로 여전히 360x640의 DIP를 사용합니다.

이 모든 경우 1280x768 픽셀의 화면에 밀도 2 (384x640)의 산만 한 Google Nexus 4가 남아 있습니다. 화면 키가있는 모델에서는 42DIP이 패널을 사용하기 때문에 세로보기 모드 (Galaxy Nexus, Nexus 4, Sony Xperia Z)에서 세로 해상도는 약간 낮아 598 픽셀입니다.

따라서 우리는 320, 460 및 희귀 한 384의 세 가지 해상도와 480, 533, 568, 640 (소프트 키의 598) 해상도 해상도 절반의 세 가지 해상도를 제공합니다.

태블릿은 세로 600 및 가로 800, 세로 960, 1024 및 1280입니다.

아래 표는 인기있는 제품에 대한 가장 일반적인 사용 권한을 나열합니다.

모바일 앱 레이아웃 작업 시작 방법

우선, 지침을 읽으십시오. 다른 플랫폼의 응용 프로그램은 다르게 보일 것입니다. 예를 들어 링크를 따라 가면 다양한 운영 체제의 일반적인 요소를 비교할 수 있습니다.

iPhone 응용 프로그램 레이아웃에서 작업하려면 640x1136 (960) 캔버스를 만들고 2의 배수 인 크기를 사용하십시오. 모든 그래픽, 모든 글꼴이 같아야합니다.

신호 표시기, 배터리 등이있는 상태 표시 줄은 향후 응용 프로그램에서 화면의 특정 부분을 차지할 수 있습니다. Android의 경우 20 점, DIP의 경우 25 점입니다. 화면 하단에 소프트 키와 48 개의 DIP 태블릿이있는 Android 휴대 전화에서는 탐색 모음이 필요합니다. 동시에 Samsung 태블릿과 같은 비표준 장치에서는 원래 셸을 사용하기 때문에 탐색 모음과 상태 표시 줄이 결합됩니다.

Android 휴대 전화 애플리케이션의 경우 적어도 720x1280 이상의 호스트를 갖는 것이 중요합니다. 현대 주력을 기반으로 한 1080x1960보다 낫습니다.

캔버스가 720x1280 인 경우 크기는 1080x1960의 경우 2의 배수 여야하며 3의 배수 여야합니다. 캔버스로 480x800 또는 640x960을 사용하는 것은 매우 나쁜 생각입니다.

레이아웃을 작업하는 과정에서 그래픽 편집기 창 크기를 실제 장치의 대략적인 크기로 주기적으로 축소하고 JPG를 저장하고 실제 장치에서 볼 필요가 있습니다. 버튼에 손가락을 넣을 수 있습니까? 텍스트가 너무 작지 않습니까?

적합하지 않은 크기의 레이아웃을 사용하면 응용 프로그램 또는 의도 한 그래픽의 모양이 완전히 손상 될 수 있습니다.

일반적으로 세부 사항에주의하고 기억하십시오. 픽셀과 점 / dipy는 같은 것이 아닙니다.

고밀도 스크린을위한 웹 그래픽 최적화

따라서 디스플레이의 픽셀 밀도에 대한 몇 가지 가능한 옵션이 있음을 알았습니다. 따라서 "플레이 스테이션 효과"라고도하는 불명료 한 그래픽 효과를 피하려면 고해상도 래스터 그래픽이나 SVG와 같은 벡터 그래픽을 사용해야합니다.

동시에 SVG에 대한 지원은 여전히 ​​제한적이며 구형 브라우저와의 호환성을 위해서는 여전히 래스터를 사용해야합니다. 또 다른 골치 거리는 스프라이트를 사용하는 것입니다. 배경 위치 값은 백분율로 표시해야합니다.이 값은 큰 수학적 계산이 필요합니다. 가장 어려운 방법은 미디어 쿼리를 통해 동일한 이미지의 여러 변형을 사용하는 것입니다 (예 : -webkit-min-device-pixel-ratio : 2).

보시다시피 기술 자체는 매우 단순하며 배경 이미지로 사용되는 경우 동일한 그림의 여러 버전 만 있으면됩니다. 필요한 경우 일반 이미지는 크기가 두 배가 될 때까지로드 할 수 있으며 스타일 속성을 통해 페이지에서 원하는 크기를 지정할 수 있습니다.

실제로 단점은 고해상도 이미지의 중요성입니다. 여기서 중요한 것은 사용자가 페이지의 무게 나 디자인으로 인해 더 오랜 기간 동안 볼 수있는 콘텐츠를 결정해야합니다.

인사, 캐주얼 방문자 및 블로그 사이트의 일반 독자!

얼마 전, 나는 처음부터 완전히 새로운 테마를 만들어 내 블로그를 업데이트했다. 이런 일이 일어난 것에 대해 필자는 기사 ""에 썼다. 새 템플릿을 만들 때 주요 작업 중 하나는 모든 화면 해상도를위한 사이트의 적응 형 레이아웃입니다.

이 기사의 간단한 개요 :

이전 기사에서 나는 그것에 대해 이미 썼다. 왜 그것이 필요한가? 그러나 어떻게 이러한 적응력을 달성 할 수 있을까요?

이를 위해 다양한 방법이 있습니다. 다른 사람이 자바 스크립트를 사용합니다. 하지만 가장 쉽고 올바른 방법은 CSS에 적응하는 것입니다.

반응 형 웹 사이트 레이아웃을 만드는 방법

첫째,   반응 형 웹 사이트 디자인을 태그 사이에 만들면   다음 코드를 붙여 넣습니다.

내가 사이트의 적응 형 레이아웃을 만들려고했을 때 바로 그 일을하지 않은 것은 얼마나 바보였습니까!
  확장 성 사이트 레이아웃에서 모바일 브라우저의 문제, 심지어 적응력.

상상해 보시라. 나는 디자인을 그린 다음 모든 필요한 스타일과 요청을 등록하고 다른 해상도로 사이트의 적응력을 확인합니다. 모든 것이 좋은 것 같습니다! 그러나 스마트 폰으로 블로그를 열면 그 사이트가 단순히 줄어든 것을 알 수 있습니다. 그는 모바일 장치에 적응하지 않았지만 단순히 글꼴, 그림 등의 크기를 줄였습니다.

어떻게 그렇게? 모든 스타일을 다시 검사하기 시작했습니다. 클래스를 올바르게 등록한 경우 자바 스크립트를 통해 px로 브라우저 창의 너비를 확인했습니다. 나는 충격을 받았다. 노트북을 확인할 때 1024 픽셀의 결과를 얻었으며 스마트 폰에서 사이트를 열어서 얻은 결과와 거의 같습니다.

그러나 이것은있을 수 없다!

그것은 나온다. 위에서 언급 한 코드를 등록하지 않으면 모바일 브라우저가 사이트가 적응성이 있다는 것을 이해하지 못합니다.   단순히 휴대 전화의 작은 화면에 맞도록 사이트의 페이지를 줄이려고합니다.

내 어리 석음과 무능함 때문에, 나는 많은 시간을 잃었다. 하지만 이제 나는 영원히 기억한다))).

적응 형 레이아웃 CSS 미디어 요청

  CSS로 반응하도록하려면 미디어 쿼리를 사용해야합니다.

그것은 어때? 예, 아주 간단합니다. CSS 파일에서 다음과 같은 요청을 등록해야합니다.

   @media 화면 및 (최소 너비 : 1440 픽셀) 및 (최대 너비 : 1599 픽셀) ()

이 코드는 최소 너비가 1440 픽셀이고 최대 크기가 1599 픽셀 인 화면에서 "()"사이에 포함 된 스타일이 작동 함을 의미합니다.

즉, 화면 해상도에 따라 조정해야하는 사이트 요소의 스타일은 각 가능한 화면 너비에 대해 개별적으로 철자해야합니다.

적응 형 레이아웃의 가장 중요한 화면 해상도

• 320 픽셀   - 휴대 기기 (세로 방향);
• 480 픽셀   - 모바일 장치 (가로 방향);
• 600 픽셀   - 작은 정제;
• 768 픽셀   - 정제 (세로 방향);
• 1024 픽셀   - 태블릿 (가로 방향) / 넷북;
• 1280 픽셀 이상   - PC.

이러한 권한에 중점을두고 적응 레이아웃에서 특별한주의를 기울여야합니다. 가장 일반적인 유형의 화면 해상도입니다.

부트 스트랩 반응 형 디자인

  적응 형 레이아웃 부트 스트랩을 만드는 데 매우 편리합니다. 편의성은 블록, 버튼, 테이블 등을 적용하기위한 모든 스타일입니다. 이미 부트 스트랩에 나와 있습니다. 당신은 어떤 클래스에 어떤 요소를 할당 할 것인지를 결정할 필요가 있습니다.

시작하려면 최신 버전의 부트 스트랩을 다운로드하여 사이트에 연결하십시오. Wordpress에 스타일과 스크립트를 연결하는 것은 그 자체의 특성을 가지고 있음을주의하십시오.

부트 스트랩의 레이아웃은 블록이나 화면의 너비가 12 등분으로 나누어 져 있습니다. 블록에 특정 클래스를 지정하면 블록의 너비를 원하는 파트 수와 같게 설정할 수 있습니다.

예를 들어,이 디자인을 사용하면 너비가 8 개인 내용과 화면의 너비가 4 인 세로 막대에 대해 하나의 너비 블록을 선택할 수 있습니다.

블록 너비는 화면 너비에 따라 자동으로 계산됩니다. 모바일 장치에서 볼 때 이러한 블록은 서로 아래로 이동합니다.

가장자리에서 블록의 들여 쓰기를 다시 원하는 수만큼 조정할 수 있습니다. 예를 들어, 그러한 구조는 다음과 같습니다.

너비가 10 인 블록은 화면의 1 부분에 들여 쓰기가 만들어집니다.

알아 내면 부트 스트랩으로 작업하면 매우 빠르게 작업 할 수 있습니다. 이 스타일이 정확히 올바르게 작동하고 사이트에서 비뚤어진 것이 없습니다.

앞으로 부트 슬랩 작업에 대한 몇 가지 교훈을 세울 계획입니다. 그러므로 나는이 순간을 놓치지 말 것을 권합니다.

사이트 적응성 검사

  그러나 문제는 어떻게 발생합니까? 사이트의 적응성을 확인하는 방법은 무엇입니까? 여기에서는 CSS로 미디어 요청을 처리하고 부트 스트랩을 연결하여 필요한 클래스를 사용합니다. 그리고 사이트가 모든 화면 해상도에서 올바르게 적용되는지 어떻게 확인합니까?

매우 정확하고 가장 중요한 것은 존경과 웹 마스터와 사이트의 적응 형 레이아웃에 종사하는 웹 디자이너 덕분에 무료 서비스입니다.

기사를 어떻게 좋아하니? 모든 것이 명확한가요? 그렇지 않다면 의견을 적어서 함께 이해할 것입니다.

예, 반응 형 웹 사이트 디자인을 만들려면 열심히 노력해야합니다. 그러나 이러한 작품은 귀하의 사이트 검색 엔진, 그리고 가장 중요한 귀하의 사이트에 방문자에게 유리한 태도로 보상됩니다.

각 스마트 폰의 주요 매개 변수 중 하나는 화면 해상도입니다. 그것이 무엇인지 그리고 그것이 왜 그렇게 중요한지 보도록하겠습니다.

화면 해상도는 무엇입니까?

디스플레이 해상도는 디스플레이의 픽셀 수를 길이 및 너비로 나타내는 값입니다. 이 매개 변수는 각 스마트 폰의 이미지 선명도를 결정하기 때문에 중요합니다.

화면 해상도는 이미지 품질에 영향을줍니다. 크기가 클수록 이미지가 더 선명하고 선명합니다. 장치의 크기는 크지 만 해상도가 작은 경우 이미지에 픽셀이 표시됩니다. 숫자와 기호는 오래되어 푸시 버튼 식 전화기처럼 불확실하고 명확하지 않은 드문 경우입니다.

현재 스마트 폰의 99 %에는 3 가지 유형의 스크린이 있습니다.

• HD (1280x720, 720p);
• 풀 HD (1920 × 1080, 1080p);
• 쿼드 HD (2560 × 1440, 1440p).

선택할 화면 해상도는 무엇입니까?

스마트 폰 디스플레이의 가장 인기있는 해상도 중 하나는 1280x720 픽셀입니다 - HD. 예산 가격 세그먼트의 거의 모든 가젯에는 이러한 지표가 장착되어 있습니다.

보다 강력한 장치에는 고해상도 디스플레이가 장착되어 있습니다. 1920 년부터 1080 년까지의 화면을 갖춘 스마트 폰은 오랫동안 등장 해 아무도 놀라지 않습니다. 스마트 폰의 대각선 길이가 4.5 ~ 5.5 인치 인 경우 최적의 화면은 1920x1080 픽셀 (Full HD)입니다. 이미지의 해상도가 낮 으면 눈에 띄는 픽셀이되고 사용자는 불편 함을 느낄 수 있습니다. 아마도 이것은 황금의 평균입니다. - 가격이 낮고 이미지가 선명하고 밝습니다.

대각선 길이가 5.5 인치 이상인 경우 주력 장치는 Quad HD 해상도 (2650 × 1440)를 사용합니다. 여기 이미지의 품질은 높지만, 믿는다면 인간의 눈은 거의 차이를 느낄 수 없습니다. 쿼드 HD는 미래의 기능이며 증강 된 가상 현실 기술에 필수적입니다.