2013-03-04 3 views
0

PHP로 작성된 작은 웹 사이트를 코딩하여 고정 된 869px 너비로 모든 화면에 제대로 표시되도록했습니다. 또한 다른 너비로 다른 페이지에 통합하고 싶습니다. 원래 크기보다 넓기도합니다.jquery로 브라우저 영역에 맞게 웹 사이트 컨텐츠 확대/축소

몇 가지 솔루션을 시도했지만 그 중 어떤 것도 크로스 브라우저에서 작동하는 것으로 보이지 않거나 래퍼 내의 내용을 확장하지 않습니다. 나는 또한 뷰포트 속성으로 시도하지만 성공하지 못했습니다.

나는 브라우징 영역에 콘텐츠를 맞추기 위해 브라우저의 확대/축소 효과를 사용하는 일부 브라우저 간 jquery 스크립트를 찾고 있습니다. 래퍼 (wrapper) 라 불리는 본문에 div가 있는데 브라우저의 Ctrl + 키를 사용하여 해당 내용과 내용을 크기를 조정하고 싶습니다.

+2

반응 형 디자인? – datasage

+0

다음과 같은 상황을 방지하기 위해 상대 크기로 프로젝트를 코딩합니다. :) 그러나 짧은 시간에 마무리해야합니다. – jameson

+0

규모를 조절할 때 가장 가까운 것은 메타 뷰포트 태그를 사용하는 것입니다. 모든 경우에 충분하지 않을 수 있습니다. – datasage

답변

-1

부트 스트랩을 사용하여 콘텐츠를 확장 할 수 있습니다 (http://twitter.github.com/bootstrap/). 글꼴 크기를 조정하려는 경우 LESS로 작성하거나 일반 자바 스크립트 (예 : JQuery 사용)를 사용할 수 있습니다.

당신은 다양한 표준 해상도에 자동으로 확장되는

<div class="container-fluid"> 
</div> 

로 페이지를 포장 할 수 있습니다. bootstrap.min.css를 재정 의하여 너비를 조정할 수 있습니다. 응답 기능을 사용하는 방법에 대한 가이드는 여기에서 찾을 수 있습니다 : http://twitter.github.com/bootstrap/scaffolding.html#responsive

당신은 row-fluid 클래스 된 div를 추가하고 내용을 정렬하는 데 span 클래스를 사용할 수 있습니다. 나는 그들의 홈페이지 추천 할 수 LESS를 들어 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

: http://lesscss.org/

을 그리고 이것은 자바 스크립트에서 변수를 삽입하는 방법을 보여주는 StackOverflow의 오래된 게시물입니다 : 어쩌면 variable manipulation in Less

그리드 시스템을 사용하는 방법에 대한 자세한 내용은 LESS를 사용하면 이미 귀하의 필요에 충분합니다.

+1

"그냥 Bootstrap"* 답변 *을 스팸으로 신고하기 시작했습니다. – cimmanon

+0

왜? 그는 자신의 콘텐츠가 모든 화면에서 적절하고 안정적으로 확장되기를 원합니다. 왜 reposnive scaling을 지원하는 디자인 프레임 워크를 사용하지 않아야합니까? 부트 스트랩의 반응 형 기능으로 웹 사이트는 사용 가능한 공간으로 확장됩니다. 다른 문제는 jQuery를 통해 쉽게 제어 할 수있는 글꼴 크기입니다. 문제가 무엇입니까? – Fred

+0

부트 스트랩 스케일링에 대한 일부 자습서가 유용 할 것입니다. – jameson

관련 문제