달러(약)너비 () 미디어 쿼리와 동일하지 않습니다.
저는 프로젝트에서 트위터 부트스트랩을 사용하고 있습니다.기본 부트스트랩 스타일뿐만 아니라 나만의 일부를 추가했습니다.
//My styles
@media (max-width: 767px)
{
//CSS here
}
또한 뷰포트 너비가 767px보다 작을 때 페이지에서 특정 요소의 순서를 변경하기 위해 jQuery를 사용하고 있습니다.
$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
}
}
제가 가지고 있는 문제는 폭이 다음과 같이 계산되는 것입니다.$(window).width()그리고 CSS에 의해 계산된 폭은 같지 않습니다. 때$(window).width()767을 반환합니다. CSS는 뷰포트 너비를 751로 계산하므로 16인치 차이가 있는 것 같습니다.
이 문제의 원인과 해결 방법을 아는 사람이 있습니까?사용하고 있다고 했습니다.$(window).innerWidth() < 751가는 길입니다.그러나 이상적으로 스크롤 막대의 너비를 계산하고 미디어 쿼리와 일치하는 솔루션을 찾고 싶습니다(예: 두 조건이 모두 값 767에 대해 확인하는 경우).왜냐하면 모든 브라우저가 스크롤바 너비가 16px는 아닐 것이기 때문입니다.
IE9을 .window.matchMedia()(MDN 설명서).
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
window.matchMediaCSS 미디어 쿼리와 완전히 일치하며 브라우저 지원이 상당히 좋습니다. http://caniuse.com/ #matchmedia=matchmedia
업데이트:
더 많은 브라우저를 지원해야 하는 경우 Modernizr의 mq 메서드를 사용할 수 있으며, CSS에서 미디어 쿼리를 이해하는 모든 브라우저를 지원합니다.
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
미디어 쿼리가 변경하는 CSS 규칙을 확인합니다.이것은 항상 작동하도록 보장됩니다.
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
HTML:
<body>
...
<div id="mobile-indicator"></div>
</body>
Javascript:
function isMobileWidth() {
return $('#mobile-indicator').is(':visible');
}
CSS:
#mobile-indicator {
display: none;
}
@media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
때문일 수도 있습니다.scrollbar,사용하다innerWidth에 width맘에 들다
if($(window).innerWidth() <= 751) {
$("#body-container .main-content").remove()
.insertBefore($("#body-container .left-sidebar"));
} else {
$("#body-container .main-content").remove()
.insertAfter($("#body-container .left-sidebar"));
}
또한 당신은 그것을 얻을 수 있습니다.viewport맘에 들다
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
위의 코드 소스
네, 그것은 스크롤바 때문입니다.정답 소스: 여기에 링크 설명을 입력하십시오.
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
문서의 너비를 JS-scope하지 않고 css @media 쿼리에 의해 이루어진 일종의 변경을 수행하는 것이 더 나은 방법일 수 있습니다.이 방법을 사용하면 JQuery 함수와 CSS 변경이 동시에 발생하는지 확인할 수 있습니다.
CSS:
#isthin {
display: inline-block;
content: '';
width: 1px;
height: 1px;
overflow: hidden;
}
@media only screen and (max-width: 990px) {
#isthin {
display: none;
}
}
jquery:
$(window).ready(function(){
isntMobile = $('#isthin').is(":visible");
...
});
$(window).resize(function(){
isntMobile = $('#isthin').is(":visible");
...
});
사용하다
window.내부 너비
이것은 나의 문제를 해결했습니다.
저는 최근에 부트스트랩 3에서도 같은 문제에 직면했습니다.
$.width()와 $.innerWidth()는 모두 사용할 수 없습니다.
은 - 구체적으로 입니다.
요소의 너비를 확인하는 것입니다.
당신이 아마 알고 있듯이, 그것은.container 작업, 요소작업,업,
BS CSS 규칙에 의해 설정된 현재 너비를 제공하는 유일한 요소입니다.
그래서 이런 식으로 진행됩니다.
bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
console.log("mobile");
else if (bsContainerWidth <= 950)
console.log("small");
else if (bsContainerWidth <= 1170)
console.log("medium");
else
console.log("large");
CSS를 통해 무언가를 바꾸고 Javascript를 통해 그것을 읽는 것에 의존하는 앞에서 언급한 방법들에 대한 대안이 있습니다.이 은 이메드필않지다습니요하가 .window.matchMedia또는 모데니즈르.또한 추가 HTML 요소가 필요하지 않습니다.HTML 유사 요소를 사용하여 중단점 정보를 '저장'함으로써 작동합니다.
body:after {
visibility: hidden;
height: 0;
font-size: 0;
}
@media (min-width: 20em) {
body:after {
content: "mobile";
}
}
@media (min-width: 48em) {
body:after {
content: "tablet";
}
}
@media (min-width: 64em) {
body:after {
content: "desktop";
}
}
저는 용한사를 요.body예를 들어 HTML 요소를 사용할 수 있습니다. 문자열이나 숫자를 숫추수가있다니습할에 할 수 .content사이비 종교의.모바일'일 필요는 없습니다.
이제 Javascript에서 다음과 같은 방법으로 이 정보를 읽을 수 있습니다.
var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');
if (breakpoint === 'mobile') {
doSomething();
}
이러한 방식으로 중단점 정보는 CSS에서 직접 제공되며 Javascript를 통해 올바른 화면 너비를 얻는 데 어려움이 없기 때문에 항상 정확합니다.
Javascript는 뷰포트 너비를 확인하는 두 가지 이상의 방법을 제공합니다.주의한 것처럼 내부 너비에는 도구 모음 너비가 포함되지 않으며, 시스템에 따라 도구 모음 너비가 다릅니다.도구 모음 너비를 포함하는 외부 너비 옵션도 있습니다.Mozilla Javascript API는 다음과 같습니다.
Window.outerWidth는 브라우저 창의 외부 너비를 가져옵니다.사이드바(확장된 경우), 창 크롬 및 창 크기 조정 테두리/핸들을 포함한 전체 브라우저 창의 너비를 나타냅니다.
Javascript 상태는 모든 플랫폼의 모든 브라우저에서 outerWidth에 대한 특정 의미에 의존할 수 없는 상태입니다.
outerWidth주요 데스크톱 브라우저와 대부분의 최신 스마트폰 브라우저에서 지원되지만 이전 모바일 브라우저에서는 잘 지원되지 않습니다.
했듯이, 루가지적이듯했시,,matchMediaCSS가 더 표준화되었기 때문에 좋은 선택이 될 것입니다(matchMedia는 JS를 사용하여 CSS에 의해 탐지된 뷰포트 값을 읽습니다).그러나 허용된 표준이 있더라도 이를 무시하는 지연된 브라우저가 여전히 존재합니다(IE < 10 이 경우, 적어도 XP가 죽을 때까지 matchMedia는 유용하지 않습니다).
요약하면 데스크톱 브라우저와 최신 모바일 브라우저만 개발하는 경우 outerWidth는 몇 가지 주의 사항과 함께 원하는 것을 제공해야 합니다.
여기 미디어 쿼리를 처리하는 데 덜 관여하는 요령이 있습니다.크로스 브라우저 지원은 모바일 IE를 지원하지 않기 때문에 다소 제한적입니다.
if (window.matchMedia('(max-width: 694px)').matches)
{
//do desired changes
}
자세한 내용은 Mozilla 설명서를 참조하십시오.
항상 작동하고 CSS 미디어 쿼리와 동기화되는 해결 방법입니다.
본문에 div 추가
<body>
...
<div class='check-media'></div>
...
</body>
특정 미디어 쿼리에 입력하여 스타일을 추가하고 변경
.check-media{
display:none;
width:0;
}
@media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
그런 다음 JS에서 미디어 쿼리에 입력하여 변경하는 스타일을 확인합니다.
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
따라서 일반적으로 특정 미디어 쿼리를 입력하여 변경 중인 모든 스타일을 확인할 수 있습니다.
가장 좋은 교차 검색 솔루션은 Modernizr.mq 를 사용하는 것입니다.
링크: https://modernizr.com/docs/ #mq
Modernizr.mq 을 사용하면 현재 브라우저 창 상태가 미디어 쿼리와 일치하는지 프로그래밍 방식으로 확인할 수 있습니다.
var query = Modernizr.mq('(min-width: 900px)');
if (query) {
// the browser window is larger than 900px
}
참고 브라우저는 미디어 쿼리(예: 이전 IE)를 지원하지 않습니다. mq는 항상 false를 반환합니다.
if(window.matchMedia('(max-width: 768px)').matches)
{
$(".article-item").text(function(i, text) {
if (text.length >= 150) {
text = text.substring(0, 250);
var lastIndex = text.lastIndexOf(" ");
text = text.substring(0, lastIndex) + '...';
}
$(this).text(text);
});
}
이것을 먹어보세요.
getData(){
if(window.innerWidth <= 768) {
alert('mobile view')
return;
}
//else function will work
let body= {
"key" : 'keyValue'
}
this.dataService.getData(body).subscribe(
(data: any) => {
this.myData = data
}
)
}
내가 하는 일;
<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...
나중에 아무 곳에서나 너비 변수를 호출합니다.
스크롤 막대 너비가 카운트되도록 문서 본문에 getWidth()를 올려 놓아야 합니다. 그렇지 않으면 브라우저의 스크롤 막대 너비가 getWidth()에서 차감됩니다.
장치의 폭 화면을 1초마다 확인하고 싶다면 할 수 있습니다.
setInterval(function() {
if (window.matchMedia('(max-width: 767px)').matches) {
alert('here')
} else {
alert('i am ')
}
}, 1000);
사용해 보세요.
if (document.documentElement.clientWidth < 767) {
// scripts
}
자세한 참조는 여기를 클릭하십시오.
구현 슬릭 슬라이더 및 해상도(jQuery)에 따라 블록 내 슬라이드 수가 다르게 표시됩니다.
if(window.matchMedia('(max-width: 768px)').matches) {
$('.view-id-hot_products .view-content').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
});
}
if(window.matchMedia('(max-width: 1024px)').matches) {
$('.view-id-hot_products .view-content').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
});
}
언급URL : https://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query
'programing' 카테고리의 다른 글
| 0에서 1.0 php 사이의 임의 부동 소수 (0) | 2023.08.06 |
|---|---|
| 읽기 쉬운 스트림을 종료하는 방법(종료 전) (0) | 2023.08.06 |
| Mariadb SELECT는 잠금 시 실패하지 않습니다. (0) | 2023.08.06 |
| 리액트 네이티브에서 네트워크 요청(디버깅)을 보려면 어떻게 해야 합니까? (0) | 2023.08.06 |
| 순환 유형 종속성을 해결하시겠습니까? (0) | 2023.08.01 |