여기에서 사용 사례를 설명하려고합니다. 내 사이트에는 데스크톱보기의 중단 점과 태블릿보기의 중단 점이 있습니다 (더 컴팩트합니다). 바탕 화면에서 탐색 할 때 태블릿보기를 볼 수있는 기능을 추가하려고합니다. 일부 구성원은 데스크탑에서도 컴팩트 한 디자인을 선호합니다.js를 통해 화면 너비를 조작하는 방법은 무엇입니까?
이렇게하기 위해 '@media (max-width : X)'쿼리를 속일 필요가 있다고 생각했습니다. 화면 너비 값을 조작 할 수있는 JS 코드를 찾고 있으므로 브라우저가 최대 너비를 계산할 때 지정한 값과 비교할 수 있습니다.
주목할 점은 데스크톱 브라우저에서 작동하기 때문에 메타 뷰포트를 여기에서 사용할 수 없다는 것입니다.
한 가지 해결책은 특정 클래스 (예 : .tablet)를 본문에 적용하는 것입니다. 당신의 CSS에서
<body class="tablet"></body>
: 당신이 SASS 이하 를 사용하는 경우
는@media screen and (/* your query */) {
.tablet .my-class {
/* tablet specific stuff */
}
}
그런 다음 .tablet 클래스를 제거하고 자바 스크립트
var body = document.body;
var switchToDesktop = function() {
body.className = body.className.replace('tablet', 'desktop');
}
var switchToTablet = function() {
body.className = body.className.replace('desktop', 'tablet');
}
var toggleView = function() {
(body.className.indexOf("tablet") > -1) ?
switchToDesktop() :
switchToTablet();
}
를 통해 .desktop로 교체 할 수 , 태블릿 특정 스타일을 중첩 할 수 있습니다.
@media screen and (/* your query */) {
.tablet {
h1 {
/* tablet specific h1 */
}
.my-div {
color: red;
}
/* etc... */
}
}
화면 너비는 실제보기 하드웨어의 너비입니다. 자바 스크립트로 변경할 수는 없습니다. 물론 사용자는 브라우저 창을 수동으로 크기를 재조정 할 수도 있고, Firefox'CTRL-SHIFT-M' 기능과 같은 트릭을 사용할 수도 있습니다. – Pointy
한 가지 해결책은 다음과 같습니다 :'body' 태그에'tablet' 또는'desktop' 클래스를 추가하십시오. 하위 클래스를 사용하여 요소의 스타일을 다르게 지정하십시오. 그런 다음 JS로 이러한 클래스를 조작 할 수 있습니다. 나는 아직 이것을 시도하지 않았다. –
이 용도는 무엇입니까? 테스트 또는 프로덕션 용도로 사용됩니까 (고객/방문객이 사용해야합니다)? –