2012-08-23 2 views
0

CSS3 또는 일부 자바 스크립트 라이브러리를 사용하여 웹 페이지가 화면보다 너비가 큰 콘텐츠를 가진 div를 가질 수있는 방법이 있습니까? 너비 예 큰 이미지 또는 뉴스 레터 종류의 콘텐츠를 포함하지만 스크롤이나 클리핑을 허용하지 않으면 서 화면에 맞 춥니 다. 첨부는이 동작을 보여주는 이미지입니다. 이것은 iPhone Safari의 Gmail 모바일 웹 사이트 (https://gmail.com)에서 가져 왔습니다.콘텐츠의 너비와 관계없이 화면에 맞는 내용으로 페이지를 div로 만드는 방법

See the attached image below which explains the situation.

+0

, 그들은-변환 -webkit라는 CSS3 속성을 사용하고 (X, Y를 scale3d을 설정하고, 지). 여기서 x, y, z는 창의 너비를 div의 스크롤 폭으로 나눈 비율입니다. – Nitin

답변

0

사용하여 메타 뷰포트

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"/> 

Viewport Tag Syntax

내가 그것을 알아 냈
+0

이 메타 태그를 추가하면 페이지가 화면 너비에 맞춰지게되지만 틀린 페이지 전체가 축소되어 보입니다. 내가 첨부 한 스크린 샷을보십시오. div에있는 내용을 화면에 맞게 축소하여 페이지의 내용을 정상 상태로 만듭니다. 따라서 메타 접근법의 문제점은 페이지에 매우 큰 이미지가있는 경우 첨부 된 이미지의 상단 표시 줄에있는 휴지통 아이콘이 매우 작게 표시된다는 것입니다. – Nitin

+0

스크린 샷, 코드, 설명이 더 좋습니까? – xivo

+0

나는 당신에게 문제를 표현할 것이다 : 첨부 된 스크린 샷에서 볼 수 있듯이, div는 몇 가지 뉴스 레터 종류의 내용을 담고 있으며, 화면의 너비에 콘텐츠를 어떻게 든 맞출 수있다. 즉, 확대/축소가 가능하다. 그 특별한 div 만 밖으로. 이렇게하면 "div"의 내용과 관계없이 페이지의 다른 아이콘/내용이 동일하게 보입니다. – Nitin

관련 문제