2012-10-13 2 views
1

동일한 페이지 (jQuery Mobile 사용)의 웹 페이지와 모바일 버전을 디자인했습니다.jQuery Mobile 사이트의 전체 사이트 단추를 올바르게 작동 시키려면 어떻게합니까?

사용자가 모바일 장치를 사용하고 있는지 감지하고 모바일 사이트 (mobile.html)로 리디렉션하는 자바 스크립트 코드가 있습니다.

그러나 사용자가 모바일 사이트에서 데스크톱 또는 전체 사이트로 이동하려고 시도하면 페이지가 표시되지만 제대로 표시되지 않습니다 ... 모바일 장치에서 볼 때 일종의 확대되고 축소됩니다.

************The Javascript to detect mobile device************ 

var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
if (mobile) { 
    document.location = "http://www.somedomain.com/mobile.html"; } 
} 




************jQuery Mobile button for Full Site *************** 

<ul data-role="listview" data-inset="true"> 
     <li> 
      <a href="http://www.somdomain.com/?view=full">Full Site</a> 
     </li> 
</ul> 

전체 사이트로 리디렉션되도록하려면 어떻게해야합니까?

+0

안녕 친구! 스크린 샷을 보여줄 수 있습니까? – Littm

+0

나는 스크린 샷을 가지고 있지 않다. 미안하지만 ... 사이트를 열어 볼 수는있다. www.bobbyaudley.com – rjg132234

답변

3

분명히 모바일 웹 사이트로 돌아갈 것입니다. 탐지 스크립트가 실행되고 곧 다시 리디렉션되기 때문입니다. 이것을 피하려면 기술을 사용해야합니다.

방금 ​​모바일 웹 사이트에서 온 전체 사이트를 알려주고 돌아가고 싶지는 마십시오. 전체 사이트에 대한

몇 가지 예 :

  • 체크 경우보기은 '전체'로 설정되어 있습니다. 인 경우 쿠키 또는 PHP 세션을 설정하여 검색 스크립트 실행을 방지하십시오.
  • 리퍼러이 모바일 웹 사이트인지 확인하십시오. 인 경우 검색 스크립트를 실행하지 마십시오.

희망은 당신을 길로 인도합니다. 질리안 소호 - 웡에

+0

soooo 많은 감사합니다! 제가 사용했던 실제 코드는 아래와 같습니다. – rjg132234

+0

도와 줘서 다행입니다. –

0

당신은 당신의 바탕 화면 페이지에 이르는 <a> 링크에 rel="external"를 추가하려고 할 수 있습니다하십시오으로 바탕 화면 페이지를 변환 데이터를

<ul data-role="listview" data-inset="true"> 
    <li> 
     <a href="http://www.somdomain.com/?view=full" rel="external">Full Site</a> 
    </li> 
</ul> 

이 아약스 탐색을 사용하지 않도록 설정하고 페이지를 새로 고침해야 할 것입니다 삭제 모바일 페이지.

이 기능이 작동하는지 알려주세요.

+0

나는 그 링크를 클릭하면 페이지를 새로 고침하고 모바일 사이트. – rjg132234

+0

나는 또한 'Full Site'을 넣으려고했지만 똑같은 일을한다. 모바일 페이지를 다시로드한다. – rjg132234

+0

AJAX에 새 사이트를로드하지 못하게 할 다른 방법이 있습니까? – rjg132234

3

덕분에, 나는

home.html을

function urlParam(name){ 
      var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href); 
      if(results) 
       return results[1] || 0; 
      else 
       return ''; 
     } 

     if(urlParam('view') == 'full'){ 
     } 
     if(urlParam('view') == ''){ 
      // <![CDATA[ 
      var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
      if (mobile) { 
        document.location = "http://www.mysite.com/mobile.html"; 
      } 
      // ]]> 
     } 

과 mobile.html 코드 ... 나를 위해 작동하려면 다음 코드를 얻을 수 있었다

<a href="http://www.mysite.com?view=full" data-ajax="false">Full Site</a> 
관련 문제