CSS 적응형 디스플레이를 사용하여 PC와 모바일 단말기에서 서로 다른 스타일을 표시하고 싶지 않은 경우 모바일 단말기에서 PC 웹페이지에 접속할 때만 해당 모바일 웹페이지로 이동할 수 있습니다. 인터넷상의 옵션이기도 합니다. 많은 기사에서는 다음 구현 아이디어가 편집자에 의해 테스트되었으며 안심하고 사용할 수 있다고 명시합니다.
1. 렌더링
PC 접속 화면:
모바일 액세스 디스플레이:
2. 구현:
모바일 검색엔진 최적화를 고려하지 않는다면 JS를 이용해서 모바일인지 판단한 후 지정된 페이지로 점프할지 여부만 판단하면 됩니다.
//判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值 var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { window.location.replace(url); } }
그런 다음 페이지에서 JS를 참조하고 메소드를 호출하세요.
<script src="../js/wap.js"></script> <script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>
스크립트 하우스의 친절한 알림: PC와 모바일을 사용하여 테스트 페이지를 방문하여 효과를 시연할 수 있습니다!
이 글에서는 모바일 단말이 PC페이지에 접속 시 해당 모바일 웹페이지로 점프하는 JS 기반 구현에 대해 소개하겠습니다.