브라우저가 400px 이하로 확장되지 않습니까?
저는 액체 스타일 시트를 조립하는 작업을 하고 있는데 아주 잘 작동합니다.Chrome에서 내 브라우저 창의 크기가 400px 이하로 조정되지 않는다는 것을 알아차린 한 가지는 내가 그것을 축소할 때 그것은 단지 400px 정도에서 멈추고 수평 스크롤 바를 터뜨린다는 것입니다.
핸드폰으로 사이트를 열면 320px 정도로 완벽해 보여서 400px보다 낮게 확장이 되는 것으로 알고 있습니다.
이것이 브라우저/데스크톱의 것인지 아니면 내 CSS가 아닌 다른 것을 봐야 하는지 아는 사람이 있는지 궁금합니다.저는 최소 너비 선언이 없어서 무엇이 원인인지 잘 모르겠습니다.
다시 데스크톱에서는 400px 정도의 최소 너비로 축소되었다가 멈추지만, 휴대전화에서 펼치면 약 320px 정도의 휴대전화 화면 크기로 확대됩니다.왜 최소한 데스크톱의 320인치로 축소되지 않는지 궁금합니다.
-편집- 그리고 이게 문제가 될지는 모르겠지만 오페라는 거의 아무것도 아닌 것으로 축소할 수 있게 해줍니다.그래서 크롬이나 FF가 아닌 오페라에서 작동하는거군요... 무슨 생각 있어요?
Chrome은 400px(OS X) 또는 218px(Windows) 이하에서 수평으로 크기를 조정할 수 없지만 이 문제에 대한 정말 간단한 해결책이 있습니다.
- 웹 검사기를 아래쪽이 아닌 오른쪽으로 도킹합니다.
- 검사기 패널 크기 조정 - 이제 브라우저 영역을 매우 작게(0px까지) 만들 수 있습니다.
업데이트: 이제 크롬을 사용하면 오른쪽에 도킹할 때 인스펙터 윈도우를 세로로 정렬할 수 있습니다!이렇게 하면 레이아웃이 정말 좋아집니다.
HTML과 CSS 패널이 정말 잘 어울리며 작은 콘솔 패널도 엽니다.이를 통해 Firefox/Firebug에서 Chrome으로 완전히 이동할 수 있었습니다.
웹 검사기 설정(cog 아이콘, 오른쪽 하단)에서 한 단계 더 나아가려면 사용자 에이전트 탭으로 이동합니다.화면 해상도를 원하는 대로 설정하고 세로와 가로를 빠르게 전환할 수도 있습니다.
업데이트: 여기 제가 발견한 또 다른 멋진 도구가 있습니다.http://lab.maltewassermann.com/viewport-resizer/
브라우저에 설치한 애드온 때문일 수 있습니다.도구 모음에서 모든 추가 아이콘을 제거하거나 숨긴 후 크기를 조정합니다.addon 브라우저가 있는 경우 주소 표시줄의 크기만 조정하고 addon을 볼 수 있도록 합니다.
업데이트: 2013년 7월 14일
최신 크롬 버전을 사용하면 주소 표시줄의 크기를 조정할 수 있으며 추가 기능이 자동으로 숨겨집니다.
저도 당황했지만 결국 간단한 해결책이 나왔습니다.방금 새 창을 여는 링크가 있는 HTML 파일을 만들었습니다.
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
이 새 창에는 주소 표시줄과 크롬 외에는 아무것도 없습니다. 이 크기를 111x80으로 자유롭게 조정할 수 있습니다.
nayan9의 솔루션은 잘 작동하며 html 파일을 만들지 않아도 북마크에 넣을 수 있습니다.Chrome에서 URL로 새 북마크를 만듭니다.
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
'작은 창문을 열어라' 같은 이름을 붙여주세요.이렇게 하면 크롬 내에서 크기 제한 없이 창을 쉽게 열 수 있습니다.이것을 주소 표시줄에 복사하는 것만으로는 작동하지 않습니다. 크롬은 "자바스크립트:"를 제거합니다.
화면 너비를 줄여 다른 장치를 에뮬레이트하려는 경우(그렇지 않은 이유는 무엇입니까?):
Chrome은 이제 검사기에 Emulation 섹션이 있으며, 상단 메뉴바(확대경과 요소 사이)에 있는 작은 전화 아이콘을 클릭하여 활성화됩니다.
에뮬레이션 모드를 사용하면 뷰포트 크기를 터치 에뮬레이션, 지리적 위치 및 가속도계 입력과 같은 기타 좋은 기능을 비롯하여 모든 일반적인 모바일 화면 크기로 설정할 수 있습니다.
nayan9과 drink decafe가 말한 것을 더하면 문서를 던지면 됩니다.call to window.open에 URL을 입력하면 320 창에서 현재 보고 있는 페이지를 볼 수 있습니다.스크롤 막대가 필요한 경우 너비에 추가할 수 있습니다.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
귀찮아서 북마크가 사용자에게 사이즈를 물어보도록 하세요 :-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의 DevTools는 대부분의 답변이 게시된 시점에서 크게 발전했습니다.이 문제를 해결하는 가장 좋은 방법은 크롬에 내장된 에뮬레이터를 사용하는 것입니다.
에뮬레이터를 사용하려면 DevTools를 엽니다( 를 누릅니다.F12)을 클릭한 다음 다음 아이콘을 클릭하여Device Toolbar:
그러면 원하는 모바일 장치나 뷰포트 크기를 에뮬레이트할 수 있습니다.
크롬으로 오른쪽 위에 있는 당신의 애드온의 아이콘이 문제를 일으킵니다.
-> 주소 표시줄(urls를 입력하는 위치)을 최대 너비(오른쪽 가장자리에 있는 막대를 오른쪽으로 이동)로 조정합니다.
아이콘을 비활성화합니다.
이것에 대한 간단한 해결책을 찾았습니다.
크롬에 Responsive Web Design Add-on을 설치하기만 하면 주소 표시줄과 탭 없이 별도의 창이 열리며, 이 창은 10px 이하로 축소할 수 있습니다.
여기 링크: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
저도 비슷한 문제들을 겪고 있었는데 좋은 일을 발견했어요.크롬 개발 도구를 열면 왼쪽 상단에 작은 화면과 아이패드 아이콘이 있습니다.클릭하면 페이지의 모바일 보기가 열립니다.미리 정의된 장치 또는 사용자 정의 해상도로 설정할 수 있습니다.사실 꽤 괜찮던데요.
Strg+Shift+N을 클릭하여 Incognito 모드로 전환하는 것도 쉬운 방법입니다.원하는 대로 브라우저 창 크기를 조정할 수 있습니다.
이 도구는 빠르게 전환할 수 있고 모바일 크기에 맞게 세로/세로 전환이 용이하기 때문에 마음에 듭니다.또한 개인화된 북마크렛을 만들 수 있으므로 모호한 해상도를 자주 설계할 경우 저장하여 사용할 수 있습니다.
위의 답변에도 불구하고 윈도우를 320으로 제대로 확장할 수 없었기 때문에 이 툴 중 하나를 사용해야 했습니다. 전반적으로 이 툴이 더 빠른 솔루션인 것 같습니다.
http://lab.maltewassermann.com/viewport-resizer/
저는 항상 고정된 탭으로 이 문제에 부딪힙니다.크롬은 눈에 보이는 고정된 탭 8개의 가로 폭 이하로 크기가 조정되지 않습니다!이 문제를 해결하기 위해 크기를 조정할 탭을 분리하기만 하면 됩니다...
웹 개발자의 경우 크기가 500px 이하이거나 최소 너비인 모바일이나 태블릿에서 웹 사이트의 반응성을 테스트하기 위해 개발자 도구를 사용하여 작은 화면에서 테스트합니다.테스트를 위해 개발자 도구로 이동하여 ctrl+shift+M을 누르거나 개발자 도구 화면의 왼쪽 상단에 있는 장치 아이콘을 클릭하여 장치 모드를 전환합니다.장치 아이콘이 파란색이면 브라우저 창을 변경하여 웹 사이트 응답성을 테스트할 수 있습니다.
이것이 스택 오버플로 커뮤니티에 대한 저의 첫 번째 공헌이며, 인터넷을 강력한 도구로 만든 여러분들에게 보답하기 위한 저의 노력입니다.
이제 답변 드리겠습니다.
사파리는 이런 멋진 기능을 가지고 있습니다.환경설정에서 사파리 개발자 옵션을 활성화해야 합니다.개발자 메뉴 활성화를 위한 Safari 환경설정 화면
일단 활성화되면 매우 강력한 개발자 도구들에 접근할 수 있습니다.이 도구 중 하나는 웹 사이트 응답 레이아웃을 테스트하는 데 사용할 수 있는 Viewport 조정입니다.응답 레이아웃 테스트를 활성화하려면 단축키 ++CtrlR를 사용하여 사파리 뷰 포트 조정 옵션을 활성화할 수 있습니다.이렇게 하면 다양한 뷰 포트 크기에서 웹 사이트를 테스트할 수 있는 충분한 제어 기능을 얻을 수 있습니다.
응답 레이아웃 테스트 옵션이 활성화되면 브라우저 창이 어떻게 표시되는지 스크린샷으로 보여줍니다.
- 사파리 개발자 메뉴 활성화 방법 링크 : https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
많은 스마트폰들이 줌을 사용하여 화면 크기에 맞게 페이지를 확장합니다.최소 페이지 너비는 약 400px입니다.예시적인 코드 없이, 저는 그것이 말할 수 있는 전부라고 생각합니다.
언급URL : https://stackoverflow.com/questions/8681903/browser-doesnt-scale-below-400px
'programing' 카테고리의 다른 글
| 2PL, 엄격 모델 대 엄격 모델, 혜택이 있습니까? (0) | 2023.09.17 |
|---|---|
| 자식 테마를 사용하기 위해 부모 테마의 폴더를 포함할 수 있습니까? (0) | 2023.09.17 |
| 파이썬 예외를 기록하는 방법은? (0) | 2023.09.17 |
| 마지막 몇 개의 트랜잭션을 취소하거나 MariaDB에서 어제로 되돌릴 수 있습니까? (0) | 2023.09.17 |
| jquery 데이터 테이블 열 숨기기 (0) | 2023.09.17 |