테마 컴포넌트를 하나 가지고 있습니다. 데스크톱과 모바일 모두에 대해 CSS와 Head가 정의되어 있습니다.
모바일에서는 공간 확보를 위해 더 작은 크기의 형태(shape)가 정의되어 있습니다.
Chrome과 iPhone의 Firefox에서는 잘 작동하지만, Safari에서는 데스크톱 버전이 로드됩니다.
Safari 브라우저는 사이트의 데스크톱 버전을 로드하지 않습니다.
혹시 이 문제를 보신 분 계신가요? iOS 모바일 Safari가 모바일 브라우저로 자신을 보고하지 않는 건가요? 아니면 …
감사합니다
우선 URL 끝에 다음을 추가하여 모바일 보기로 강제 전환해 보세요:
https://example.com?mobile_view=1
문제가 여러분이 생각하는 것과 다를 수 있습니다 …
사용 중인 Safari 버전도 명시해 주셔야 합니다.
thanks @merefield
https://example.com?mobile_view=1로 조회하면 Mobile용으로 정의된 작은 모양이 표시됩니다.Safari 브라우저가 Desktop 콘텐츠를 로드하는 것 같다고 의심했지만, 실제로는 Desktop 버전이 아니라 Mobile 레이아웃을 로드하는 것입니다.
이전에 이 문제를 인지하지 못했던 것 같습니다. iPhone에서 대부분 Chrome을 사용했기 때문일 수도 있습니다…
재현을 위해 문제를 보여줄 수 있는 단순화된 버전을 만들었습니다.
.deng-box1 {
position: fixed;
top: -30px;
left: 180px;
z-index: 1999;
}
.deng-box1 .deng {
position: relative;
width: 120px; // bigger size !!!
height: 90px; // bigger size !!!
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
<div class="deng-box1">
<div class="deng">
</div>
</div>
.deng-box-mobile {
position: fixed;
top: 180px;
left: -40px;
z-index: 1999;
}
.deng-box-mobile .deng {
position: relative;
width: 60px; // smaller size!!!!!!
height: 45px; // smaller size !!!!!
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
<div class="deng-box-mobile">
<div class="deng">
</div>
</div>
이것을 GitHub에 패키징하여 사람들이 쉽게 검증할 수 있도록 하는 것을 제안합니다…
사파리 모바일 브라우저에서 이 쿼리 문자열을 붙여넣으면 어떻게 되나요?
?mobile_view=1을 이렇게 사용하면 아이폰 사파리 브라우저에서 모바일 버전이 로드됩니다.
음…
테스트/디버깅을 쉽게 할 수 있도록 저장소에 올릴게요. 도움 주셔서 감사합니다!
아, 그리고 그전에는 안 그랬나요? 흥미롭네요!
17.3 (PB)에서 제 TC(트레드클라이머)의 모바일 버전을 iPhone 11에서 쿼리스트링으로 강제하지 않아도 모바일 버전으로 보고 있습니다.