>  기사  >  웹 프론트엔드  >  JS 기반으로 모바일 단말이 PC 페이지_javascript 스킬 접속 시 해당 모바일 웹페이지로 점프합니다.

JS 기반으로 모바일 단말이 PC 페이지_javascript 스킬 접속 시 해당 모바일 웹페이지로 점프합니다.

WBOY
WBOY원래의
2016-05-16 15:05:301504검색

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 기반 구현에 대해 소개하겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.