직장에서 이상한 문제에 부딪혔는데, 오랜 시간 고민 끝에 해결한 분석 아이디어와 해결책을 여기에 기록합니다.
반응형 기업 공식 홈페이지를 구축하는 프로젝트인데, 초기에 정적인 이미지 페이지를 잘라낸 뒤 백엔드에 제출해 템플릿으로 사용했고, 저는 기본적으로 프로젝트를 그만뒀습니다.
백엔드를 구현했을 때 모바일 단말기의 페이지 표시가 정확하지 않고 매우 흐릿하게 보이는 것을 발견했습니다. 첫 번째 생각은 메타의 머리 부분이 덮여 있다는 것이었습니다. 소스 코드를 확인해보니 덮여 있었습니다.
이것은 장치 너비에 따라 페이지 너비를 적응적으로 변경하는 데 사용했던 메타 헤더입니다.
<메타 이름=뷰포트 콘텐츠=width=device-width, 초기-규모=1, 최소-규모=1.0, 최대-규모=1.0, user-scalable=no />
하지만 백엔드 구현 프레임워크는 템플릿에 따라 직접 도입되며 일부 공개 리소스에는 뷰포트 설정을 위한 메타가 포함되기도 합니다. 백엔드는 다음과 같이 소개됩니다.
<메타 이름=뷰포트 ID=뷰포트 콘텐츠=너비=640px, user-scalable=no>
이 헤더에는 추가해야 하는 js 파일이 추가되는데, js 파일은 수정할 수 없다는 점을 명확히 알려드립니다! 따라서 640px의 고정 너비 설정은 장치 너비에 따라 변경되는 원래 메타 설정을 덮어씁니다!
문제는 정적 페이지가 완성됐고, 과거 코드 요인으로 인해 코드의 상당 부분이 처음에는 rem 단위를 사용하지 않았으며, 더 이상 CSS 효과를 대규모로 수정할 수 없다는 점입니다. js를 통해 뷰포트 너비를 재설정해야만 다시 재정의할 수 있습니다. 이것은 매우 간단하지만 코드는 매우 보기 흉합니다.
하지만 또 다른 문제가 발생합니다. 이 공식 웹사이트 페이지에도 iframe 페이지가 640px로 고정되어 있습니다. 이건 정말 파괴적이에요! 기기 너비에 따라 변경되는 메타를 추가하면 해당 iframe을 볼 수 없습니다. 다시 메타를 추가하지 않으면 공식 웹사이트 자체를 볼 수 없습니다!
다행스럽게도 이러한 iframe은 통합된 방식으로 도입되었습니다. 도입 방식의 js 파일은 변경할 수 없지만 비즈니스 코드에서 다시 모니터링할 수는 있습니다. 따라서 클릭 이벤트를 다시 바인딩하고 iframe이 도입되었는지 여부를 확인한 후에는 몇 가지 특별한 방법을 사용할 차례입니다!
CSS3에는 요소의 크기를 조정할 수 있는 transform: scale() 메서드가 있습니다. 점유된 공간의 실제 너비와 높이는 변경되지 않았지만 표시 효과는 여전히 좋습니다.
해당 스케일링 비율은 缩放比例= 设备宽度/ 640 계산한 다음 도입된 iframe에 transform: scale(缩放比例) 설정하여 아름다운 스케일링을 달성함으로써 얻을 수 있습니다!
이게 문제의 끝인가요? 아니요! 아직 아님! iframe의 크기가 조정되지만 높이도 조정되어 콘텐츠가 불완전하게 표시됩니다. height: 设备高度/ 缩放比例원래 iframe 높이를 복원할 수 있습니다.
끝난 줄 알았는데? 설마! 여전히 문제가 있습니다! iframe 레이어는 scale() 속성에 의해 크기가 조정된 후 기본적으로 특정 거리를 아래쪽과 오른쪽으로 이동합니다. 이는 scale() 기본적으로 중심에 따라 크기가 조정되기 때문입니다. 여기서는 음수 마진, Translate() 등 적합한 솔루션을 찾는 데 많은 시간을 소비했습니다. 그러나 적절한 이동 비율 계수를 계산하는 것이 어렵기 때문에 이 방법을 시도한 것이 아쉽습니다. 오랫동안 고민하다가 결국 포기하기로 결정.... ..
CSS 매뉴얼을 보다가 익숙하면서도 생소한 속성을 발견했습니다.
회전된 요소의 기준점 위치를 설정합니다.
변환 원점: x축 y축 z축;
여기에는 정의된 뷰가 X, Y 및 Z 축에 배치되는 위치를 각각 나타내는 세 가지 속성 값이 있습니다.
낯선 땅에서 오랜 친구를 만나다, 오랜 가뭄 끝에 오랜 친구를 만나다! 내가 원하는 건 바로 너야! transform-origin: 0 top 0 솔루션~
사실 이 속성은 오래전부터 사용됐는데 제가 처음 쓴 것은 축약형 transform-origin: 0 이었고, 브라우저로 파싱한 결과는 transform-origin: 0 center 0 이었습니다... 제가 느낀점은 이렇습니다. 그때는 iframe을 위로 올려볼까 고민도 해봤는데 남들이 그런 기능이 있는 줄은 몰랐는데 무시해버렸네요. 나는 아직도 한 가지 속성에 반나절을 낭비할 수 없습니다. 아마도 나는 자격을 갖춘 프론트엔드가 아닐 것입니다... (탈출)
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.