많은 분 들이 스마트폰을 사용하는 이때
정말 불편한 점이
아직도 스마트폰으로 못하는 작업이 있어 꼭 PC에서 해야하는 작업이 있다는점...
아주 완벽하지 않지만
가능성이 있는 범위에서
그 방법을 알려드립니다.
Play 스토어 에서 돌핀브라우저를 설치합니다.
돌핀브라우저 설치 후 예를들어 티스토리 사이트를 접속하여 pc버전으로 보거나 바로 pc에서 보던 화면이 나오면 화면돌리기 로 동영상 볼때 세로에서 가로방향으로 설정해주고 보면 손가락으로 화면을 이동해보면 로그인 버튼도 때에 따라서 초대장 보내기도 성공하였습니다.
인터넷 창의 하단 돌고래 그림을 누르고 위 사진 처럼 고급설정에서 사용자 에이전트를 반드시 데스크톱스로 해주여야만 가능하니 유의하세요!
합법적인 스포츠토토사이트인 베트맨토토사이트에서도
금액 충전이 가능하였습니다.
첫번째는 모바일 화면, 두번째는 돌핀브라우저에서 구현한 데스트톱 화면입니다.
세로에서 가로보기 여서 작게 보입니다.
�ȳ��ϼ���. �� ������ �Դϴ�.
�̹��� �����ϴ� ������ ����̽�,PC�� �����Ͽ� ������̸� ����� PC�� PC�������� �������� �ҽ��� �־����ϴ�.
pc���ʿ� ��ũ��Ʈ�� ���� �Ͽ����ϴ�. �� .. �׳� �ҽ� ���� �־����.
<script type="text/javascript">
###########�����,PC����_20140702�߰�######################
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1) {
document.location = "�̵��� ����� ������";
}
###########�����,PC����_20140702�߰�######################
</script>
�� �ʿ��� ���������� �̷��� �־��µ� ������ �̷��� ��ũ��Ʈ�� ���� �Ͽ��� ��� ������ ����Ͽ��� PC������ ���� ������ �� ������ ������ Ÿ�� ���� ������ www�� �������� �̵��� ���ѵ� �ٽ� ����Ϸ� ���ƿɴϴ�.. �翬�� �̾߱� ������..
����� �������� PC�������� �ٸ� ������ �̿��ϰ� �ֱ���.. ������, ���������� ����� �������� ���� PC�������� ���� ��ư�� �־����� � ������� �־�� ��� ������ �����ұ��?
���� �����غô� ������ user-agent ���� ���Ƿ� �ٲ��ִ°� �����غôµ� �ҽ��� ã�ƺ��� ������ �ʴ���.
�ٸ� ����� �����ø� ������ ��Ź�帮�ڽ��ϴ�!
- �亯ä���� 100%
- ��õ 0 �� ������ ������ �Ǿ�����?
- ����õ 0 �� ������ ������ �ȵ˴ϴ�.
서비스 특성, 자금상황, 사업계획에 따라
모바일 웹 개발 방법은 기업마다 다르겠지만,
저의 경우 PC 웹개발 서버 한 대를 이용하여 모바일 웹을 개발하였습니다.
모바일 웹 서버를 별도로 구축하자니
자금적인 부담이 느껴지고,
반응형 웹을 개발하여 PC+모바일 개발을 한번에 하자니
개발에 입문한지 얼마 안된 저로선 자신이 없었습니다.
본 게시물은 저처럼 동일한 페이지를 접속 디바이스를 체크하여 다르게 보여주는 방법을 소개해 드리고자 합니다.
동일한 페이지를 접속 디바이스(모바일/PC) 환경에 따라 다르게 구성하기
저비용의 예산으로 간편히 모바일 웹 페이지를 만드는 방법
저는 PC 전용 웹 페이지와 모바일 전용 웹 페이지를 모두 개발하였습니다.
단, PC 환경이나 모바일 환경이나 동일한 메인 페이지(localhost/index.php)에서 서비스가 시작되도록 하였습니다.
서비스 이용의 시작 지점은 동일한 페이지에서 이뤄지도록 하고자 하였죠.
즉, 서버 루트 경로에 존재하는 'index.php' 페이지를 디바이스 환경에 따라 다른 화면으로 구성해 보았습니다.
PC(좌측)와 모바일(우측) 각각의 환경에서 따라 동일한 주소(//dolbom.info/index.php)의 웹 페이지 화면을 서로 다르게 구성할 수 있다.
| 구현절차 1) 모바일 접속 환경에 해당하는 키워드 산출 (iphone, skt, mobile, samsung 등) 2) 사용자의 디바이스 환경 정보가 함축된 PHP 전역변수인 '$_SERVER['HTTP_USER_AGENT']'를 선언. 3) 'preg_match' 함수를 이용하여 위 '1번(검색어)'과 '2번(검색대상)' 대입 검색 |
| 참고 * preg_match("검색어", "검색대상의 문자열") [ = PHP 함수] 정규 표현식에 해당하는 패턴이 검색되면, 더는 검색하지 않고 검색을 중단함으로써 리소스를 절약할 수 있습니다. 일치하는 패턴이 존재하면 1을 반환하고, 존재하지 않으면 0을 반환합니다. * $_SERVER['HTTP_USER_AGENT'] [ = PHP 객체] 본 변수를 활용하면 윈도우 OS PC환경에서 크롬 브라우저로 유입 시 아래 정보를 가져올 수 있게 됩니다. Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 |
<?php $mobileArray = array("iphone", "lgtelecom", "skt", "mobile", "samsung", "nokia", "blackberry", "android", "sony", "phone"); $dev_checkCount = 0; for($num = 0; $num < sizeof($mobileArray); $num++){ if(preg_match("/$mobileArray[$num]/", strtolower($_SERVER['HTTP_USER_AGENT']))){ $dev_checkCount++; break; } } ?> <!DOCTYPE html> <html> <?php if($dev_checkCount == 0){?> <body> ... (중략_PC웹 코딩내용) ... </body><?php } else{?> <body> ... (중략_모바일웹 코딩내용) ... </body><?php } ?> </html>
모바일 웹 퍼블리싱은 PC 환경보다 더 신경쓸게 많았습니다.
모바일 디바이스 해상도와 디바이스 크기 모두 천차만별이기 때문에 폰트 사이즈 지정 시 절대적 고정 값 'px'단위 대신 'rem'(root em, 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 폰트 사이즈 단위)을 사용해야 기획 의도에 맞는 퍼블리싱이 가능합니다.
| 참고
16px = 1rem
css 미디어쿼리를 활용하여 'html' 요소의 font-size는 퍼센트로 정의하고 'body' 요소의 font-size는 rem 단위로 세팅하는게 정석이다
@media (min-width:900px) {
html { font-size:62.5% }
body { font-size:1.6rem }
}
그런데 이런 상대적 폰트 단위를 적용하면 종종 모바일 브라우저 앱 특성에 따라(특히 크롬!) 갑자기 일부 폰트 크기만 비정상적으로 커져서 출력되기도 하는데요.
저 같은 경우 max-height 값의 경계를 무한대(예: max-height:10000000px)로 설정하여 우측 화면처럼 개선하였습니다. (혹시 도움이 될까 하는 마음에 이런 소소한 팁도 공유해 드려요)
변변치 않은 글이지만 지금까지 이 포스팅 내용을 끝까지 정독해 주신 분들께 감사의 말씀드립니다. 이만 포스팅 마치겠습니다. 건강관리 잘하시고 항상 건강하시길 기원합니다!