브라우저가 400px 미만으로 확장되지 않습니까?

나는 액체 스타일 시트를 만드는 작업을하고 있으며 훌륭하게 작동합니다. 내가 알았던 한 가지 사항은 Chrome의 브라우저 창 크기가 400px 미만으로 조정되지 않고 거기에 붙어 있고 FF에서 축소하면 약 400px에서 멈춘 다음 가로 스크롤 막대가 팝업된다는 것입니다.

휴대 전화에서 사이트를 열면 약 320px에서 완벽하게 보이므로 400px보다 작습니다.

이것이 브라우저 / 데스크톱인지 또는 내 CSS 이외의 것을보고 있어야하는지 궁금한 사람이 있습니다. 최소 너비 선언이 없으므로이 원인을 알 수 없습니다.

다시 데스크탑에서 그것은 약 400px의 최소 너비로 축소되고 멈 춥니 다.하지만 휴대 전화에서 열면 대략 320px 인 전화 화면의 크기로 확장됩니다. 데스크톱에서 320px로 축소되지 않습니다.

또한 이것이 중요한지 확실하지 않지만 Opera는 거의 아무것도 축소 할 수 없습니다 ... 그래서 Chrome 또는 FF가 아닌 Opera와 작동합니다 ... 아이디어?

Chrome은 가로 400px (OS X) 또는 218px (Windows) 크기를 조정할 수 없지만 문제에 대한 간단한 해결책이 있습니다.

1. 웹 관리자를 하단이 아닌 오른쪽 에 고정
2. 인스펙터 패널 크기 조정 -이제 브라우저 영역을 매우 작게 만들 수 있습니다 (0px까지).

업데이트 : 이제 Chrome을 사용하면 오른쪽에 도킹 할 때 관리자 창을 세로로 배열 할 수 있습니다! 이것은 실제로 레이아웃을 향상시킵니다.

HTML 및 CSS 패널은 실제로 잘 맞으며 작은 콘솔 패널도 열 수 있습니다. 이를 통해 Firefox / Firebug에서 Chrome으로 완전히 이동할 수있었습니다.

한 단계 더 나아가려면 웹 관리자 설정 (장부 아이콘, 오른쪽 아래)을보고 사용자 에이전트 탭으로 이동하십시오. 여기에서 화면 해상도를 원하는대로 설정하고 세로와 가로를 빠르게 전환 할 수 있습니다.

업데이트 : 여기에 내가 본 또 다른 멋진 도구가 있습니다. http://lab.maltewassermann.com/viewport-resizer/

브라우저에 설치 한 애드온 때문일 수 있습니다. 도구 모음에서 모든 애드온 아이콘을 제거하거나 숨기고 크기를 조정하십시오. 애드온 브라우저가있는 경우 주소 표시 줄의 크기 만 조정하고 애드온을 계속 표시합니다.

업데이트 : 2013 년 7 월 14 일

최신 크롬 버전에서는 주소 표시 줄의 크기를 조정할 수 있으며 애드온이 자동으로 숨겨집니다.

나는 또한 혼란에 빠졌지 만 간단한 해결책으로 끝났다. 방금 새 창을 열 수있는 링크가있는 HTML 파일을 만들었습니다.

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

이 새 창에는 주소 표시 줄만 있으며 Chrome을 사용하면 크기를 111x80으로 자유롭게 조정할 수 있습니다.

nayan9의 솔루션은 훌륭하게 작동하며 html 파일을 만들지 않고도 책갈피에 넣을 수 있습니다. Chrome에서 URL을 사용하여 새 북마크를 만듭니다.

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

그리고 "Open Small Window"또는 이와 유사한 이름을 지정하십시오. 이렇게하면 크롬 내에서 크기 제한없이 창을 쉽게 열 수 있습니다. 크롬을 주소 표시 줄에 복사하면 작동하지 않습니다. 크롬은 "javascript :"를 제거합니다.

다른 장치를 에뮬레이트하기 위해 화면 너비를 줄이려는 경우 (그리고 왜 다른 방법을 원하십니까?)

Chrome에는 이제 관리자의 에뮬레이션 섹션이 있으며 상단 메뉴 표시 줄의 작은 전화 아이콘 (돋보기와 요소 사이)을 클릭하면 활성화됩니다.

에뮬레이션 모드를 사용하면 터치, 지리적 위치 및 가속도계 입력과 같은 다른 멋진 기능 중에서 뷰포트 크기를 모든 일반적인 모바일 화면 크기로 설정할 수 있습니다.

nayan9와 drinkdecaf가 말한 것에 덧붙여서 document.URL을 window.open 호출에 던져 현재 320 페이지에서보고있는 페이지를 볼 수 있습니다. 스크롤 막대가 필요할 경우 너비를 더 추가 할 수 있습니다.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

Chrome의 DevTools는 대부분의 답변이 게시 된 시점에서 크게 발전했습니다. 현재이 문제를 해결하는 가장 좋은 방법은 Chrome에 내장 된 에뮬레이터를 사용하는 것입니다.

에뮬레이터를 사용하려면 DevTools를 열고 (을 누름 F12) 다음 아이콘을 클릭하여 Device Toolbar:

그러면 원하는 모바일 장치 나 뷰포트 크기를 에뮬레이션 할 수 있습니다.

크롬에서 오른쪽 상단 모서리에있는 애드온 아이콘이 문제를 일으 킵니다.

-> 주소 표시 줄 (URL을 입력하는 위치)을 최대 너비로 조정하십시오 (오른쪽 가장자리의 막대를 오른쪽으로 드래그하십시오)

또는 아이콘을 비활성화

게으른, 더 쉽게 만들기 위해, bookmarklet이 사용자에게 크기를 요구하게하십시오 :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

이에 대한 빠른 해결 방법을 찾았습니다.

반응 형 웹 디자인 애드온을 Chrome에 설치하기 만하면 주소 표시 줄과 탭이없는 별도의 창이 열리 며 10px 이하로 축소 할 수 있습니다.

여기 링크 : https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

비슷한 문제가 발생하여 좋은 해결책을 찾았습니다. 크롬 devtools를 열고 왼쪽 상단에 작은 화면과 ipad 아이콘이 있습니다. 그것을 클릭하면 페이지의 모바일 뷰가 열립니다. 사전 정의 된 장치 또는 사용자 정의 해상도로 설정할 수 있습니다. 실제로 꽤 근사하다.

또 다른 쉬운 해결책은 Strg + Shift + N을 클릭하여 시크릿 모드로 들어가는 것입니다. 거기에서 원하는대로 브라우저 창의 크기를 조정할 수 있습니다.

이 도구를 사용하면 모바일 크기에 따라 빠르게 전환 할 수 있고 세로 / 가로를 쉽게 전환 할 수 있습니다. 또한 개인화 된 책갈피 렛트를 만들 수 있으므로 모호한 해상도를 자주 설계하면이를 저장하고 사용할 수 있습니다.

위의 대답으로도 창을 320으로 올바르게 확장 할 수 없었기 때문에이 도구 중 하나를 사용해야했습니다.이 도구는 전체적으로 더 빠른 솔루션 인 것 같습니다.

http://lab.maltewassermann.com/viewport-resizer/

고정 된 탭으로 항상이 문제가 발생합니다. Chrome은 가로로 보이는 8 개의 고정 된 탭의 가로 너비 아래에서 크기가 조정되지 않습니다! 크기를 조정하려는 탭을 분리하면이 문제를 해결할 수 있습니다 ...

이것은 스택 오버 플로우 커뮤니티에 대한 첫 번째 기여이며 인터넷을 강력한 도구로 만든 훌륭한 사람들에게 모든 것을 제공하려는 노력입니다. 이제 anser : Safari에는이 멋진 기능이 있습니다. 환경 설정에서 사파리 개발자 옵션을 활성화해야합니다. 개발자 메뉴를 활성화하기 위해 Safari에서 환경 설정을 설정 한 스크린 샷

활성화되면 매우 강력한 개발자 도구에 액세스 할 수 있습니다. 이 도구 중 하나는 웹 사이트 반응 형 레이아웃을 테스트하는 데 사용할 수있는 뷰포트 조정입니다. 반응 형 레이아웃 테스트를 활성화하려면 바로 가기 Cmd + ctr + R을 사용하여 사파리 뷰 포트 조정 옵션을 활성화 할 수 있습니다. 이렇게하면 다양한 뷰 포트 크기에서 웹 사이트를 테스트 할 수있는 충분한 제어 권한이 제공됩니다.

반응 형 레이아웃 테스트 옵션이 활성화되면 브라우저 창이 어떻게 보이는지 스크린 샷입니다.

1. 사파리에서 개발자 메뉴를 활성화하는 방법에 대한 링크 : https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

많은 스마트 폰이 확대 / 축소를 사용하여 화면 크기에 맞게 페이지를 확장합니다. 최소 페이지 너비는 아마도 400px입니다. 예제 코드가 없으면 이것이 전부라고 생각합니다.