페이지 풍경 및 인물 뷰 디자인 - 인형

iPhone 또는 iPad를 켜면 웹 페이지의 방향이 그에 따라 자동으로 조정됩니다. 사파리 웹 브라우저는 화면에 맞게 웹 페이지를 독창적으로 확대 (축소)하지만 완벽한 것은 아닙니다. Safari가 페이지를 전체 공간에 잘 맞출 수 있다고하더라도 다음과 같은 이유로 디자인에 어려움이있을 수 있습니다.

• iPad에서 가로 모드에 맞게 페이지를 확대하면 최적화 된 이미지가 흐려질 수 있습니다.

• 페이지 크기를 줄이면 텍스트를 읽을 수 없게 될 수 있습니다.

대부분의 사람들은 수년 동안 가장 일반적으로 사용되는 컴퓨터 모니터의 웹 페이지 폭과 높이를 최적화했습니다.

• 너비: 웹 초창기에는이 전략을 사용하여 800 x 600 픽셀로 설정된 모니터 해상도 내에 들어갈 수 있도록 780 픽셀을 넘지 않아야합니다. 대부분의 사람들은 780 픽셀을 선택했기 때문에 브라우저 윈도우 양쪽에 스크롤바를위한 약간의 공간이 남았습니다.

  높이:

• 대부분의 설계자는이 화면 크기에 최적화 된 디자인의 너비에 동의하지만 (10 또는 20 픽셀을주고 받음) 웹 페이지 디자인이 이러한 디자인의 높이 내에 들어가야하는지에 대한 논란이있었습니다. 이 그림은 iPad가 웹 페이지의 길이에 대한 논쟁을 영원히 바꾸어 놓은 이유를 설명합니다. 세로 모드에서 iPad에 나타나는 ING Direct 웹 사이트의 스크린 샷을 볼 수 있습니다. ING Direct의 디자이너들에게 공평하게이 사이트는 800 x 600 픽셀의 해상도를 가진 모니터의 제약 조건에 안성맞춤입니다.

  사이트의 콘텐츠를 600 픽셀로 제한함으로써 디자인은 세로 모드에서 iPad 화면의 약 1/3 만 차지합니다. iPad의 가로 모드에서도 디자인은 세로 공간을 차지하지 않고 대신 화면의 하단 1/4을 밝은 오렌지색 배경색으로 채 웁니다.

웹 사이트에 대해 단 하나의 디자인을 만들고 싶다면 가장 좋은 방법은 980 픽셀 너비의 페이지를 디자인 한 다음 최소 980 픽셀을 화면 아래로 확장하는 것입니다.이렇게하면 iPad와 iPhone이 자동으로 크기를 조정하여 가로 및 세로 모드로 화면을 채우도록 디자인을 조정합니다.

하지만 디자인을 정말로 염두에두고 페이지를 iPad와 iPhone에서 최상으로 보이게하려면 가장 좋은 방법은 두 가지 디자인을 만드는 것입니다.

Cascading Style Sheets (CSS) 규칙은 각 장치의 크기와 기능을 최대한 활용할 수 있도록 여러 스타일 시트를 만드는 옵션을 포함합니다. 예를 들어 iPhone 또는 iPad의 가로 또는 세로 방향을 대상으로 스타일을 만들 수 있습니다 (여기에 표시된 디자인에서와 같이).

마찬가지로, 스타일 시트가 다른 여러 장치를 대상으로 지정할 수 있습니다. 한 세트의 스타일은 데스크탑 컴퓨터에 표시 될 때 스타일을 만들고 페이지가 프린터로 전송 될 때 다른 스타일 세트를 생성합니다.