장고, PC 또는 모바일 웹 클라이언트 접속 검사

장고, PC 또는 모바일 웹 클라이언트 접속 검사

 

글. 수알치 오상문

 

자바스크립트로 모바일 웹을 검사하는 방법은 소개되어 있던데 장고에서 확인하는 방법이 있을까 찾아보다가 장고에서 제공하는 request.META 정보에 모바일 관련 부분이 있어서 적용해봤습니다.

 

실제 모바일 장치에서는 테스트 하지 못했고, 크롬 개발자 모드에서 PC/모바일로 구분하여 테스트하니 잘 동작합니다. request.META에서 모바일 여부를 알려주는 항목은 'HTTP_SEC_CH_UA_MOBILE' 입니다. 

 

이 값이 존재하지 않거나 값이 '?0'이면 PC 웹 접속으로 인식하고 아닌 경우(값은 '?1')에는 모바일 웹 접속으로 판단하게 했습니다. 장고 소스 코드는 다음과 같습니다.

 

# 클라이언트 장치 정보 확인 

def check_pc_mobile(request):
  values = request.META
  html = []

  is_mobile = 'HTTP_SEC_CH_UA_MOBILE' in values

  if not is_mobile or str(values['HTTP_SEC_CH_UA_MOBILE']) == '?0':  # PC 접속
    html.append('<h1>PC 접속입니다.</h1>')
  else:  # 모바일 접속
    html.append('<h1>모바일 웹 접속입니다.</h1>')

 

  # 아래 부분은 request.META 전체 내용을 출력해보는 코드입니다.

  for k in sorted(values):
    html.append('<tr><td>%s</td><td>%s</td></tr>' % (k, values[k]))

 

  # 검사 내용을 웹 브라우저에 출력하기 

  return HttpResponse('<table>%s</table>' % '\n'.join(html))

 

 

[참고] 자바스크립트에서 PC/모바일 웹 구분하기 

클라이언트 운영체제나 브라우저 정보를 이용하여 구분하는 방법도 있지만, 픽셀비율 값을 이용하여 짐작할 수도 있습니다. 자바스크립트에서 window.devicePixelRatio 정보를 이용하여 웹 스크린 PixelRatio 값을 구할 수 있는데, PC는 기본이 1(100% 화면 기준)입니다. 웹 브라우저 화면 배율 확대를 하면 그 비율만큼 PixelRatio 값도 증가하는데 150%를 넘어가는 경우는 아주 드물죠. 반면에 모바일 스크린 PixelRatio는 대부분 최소 1.5배(오래된 모바일)에서 4배 수준까지 존재합니다. 그러므로 이 값을 이용하면 PC에서 접속한 것인지 모바일 장치에서 접근한 것인지 대략 구분이 가능합니다. 아래 코드를 자바스크립트로 작성된 검사 코드입니다.

 

<div class="pc" style="font-size:1em;">
  <h1>PC WEB</h1>
</div>

<div class="mobile" style="font-size:1em;">
  <h1>Mobile WEB</h1>
</div>

<!--  
devicePixelRatio: PC는 대부분 1.5 이하이고 모바일은 1.5 또는 2 이상  
-->
<script type="text/javascript">
var ratio = window.devicePixelRatio;
console.log(ratio);

if (ratio < 2) 
document.querySelector('.mobile').style.display = 'none';
else
document.querySelector('.pc').style.display = 'none';
</script>

</body>
</html>

 

 

[참고] 모바일 또는 데스크톱을 확인하는 경우 mobile 논리 값 사용 가능

const isMobile = navigator.userAgentData.mobile;