디자인텐

반응형 스킨을 PC데스크탑 컴퓨터 모니터에서 모바일(휴대폰) 보는것처럼 확인하는 법 본문

막이야기

반응형 스킨을 PC데스크탑 컴퓨터 모니터에서 모바일(휴대폰) 보는것처럼 확인하는 법

아!침밥먹기 2014. 11. 2. 21:13



데스크탑 컴퓨터와 모바일 2가지 경우가 있는데요, 반응형 스킨을 쓰는 이유가 바로 데스크탑화면과 모바일 화면에서 보여지는 방식이 다르기 때문입니다. 데스크탑화면기준으로 아무리 멋지게 만들어도 모바일 화면에서는 잘려보이면 무용지물입니다. 그래서 나온 것이 반응형스킨이라 하지요. 


가장 원시적인 테스트 방법은 데스크탑 컴퓨터와 모바일 직접 확인해 보면 됩니다. 휴대폰으로 직접 접속해서 주소치고 보면됩니다. 그러나 불편하지 않을 수 없습니다.


자신의 피씨(데스크탑)화면에서, 바로 모바일환경으로 확인하는 방법이 없을까요?


있습니다. 있습니다요^^ 

있으니까 제가 이 글을 쓰고 있겠지요^^

http://troy.labs.daum.net/


이곳에 들어가서 왼쪽에 모바일 기기를 선택, 위쪽에 주소를 치면, 바로 모바일 환경에서 나옵니다.

그러나 여기서 조심해야 할 점은 그냥 주소만 치면 안됩니다. 저의 주소 http://design10.tistory.com 만 치면 데스크탑버전이 나와서 화면이 짤려 나옵니다. 

그러므로 항상 뒤에다가 /m 을 붙이셔야 합니다.

자신의 휴대폰(모바일)기기로 직접 주소를 치는 경우에는 자세히 보시면 알겠지만, 자동으로 /m이 붙거든요

그러나 이것은 데스크탑 환경이기 때문에 모바일버전이라는 것을 컴퓨터에 알려줘야 하기 때문 항상 주소를 치신다음에 부에다가 /m붙이시는 것을 잊지 마시길 바랍니다^^





자~ 여기까지 하면 끝나는줄 알았는데요. 조심해야 할 점이 하나 더 있더군요.

저는 며칠동안 몰랐는데요. 

반응형 스킨만 설치하면 자동으로 잘 나오는줄 알았는데, 직접 저의 휴대폰으로 확인해본 결과 또 안나오는 겁니다. 그래서 원인을 분석해 보니

티스토리에의 기본설정으로 가서 (모바일웹 스킨)을 ON에서 off로 바꿔서 설정을 꺼야 하더라고요^^


티스토리 관리 -> 모바일웹 스킨 ->모바일웹 스킨 OFF로 바꿔줘야 합니다. 그래야 본인의 반응형 스킨이 이제 짠 하고 나타납니다^^








자. 이제 이해가셨죠^^ 자 완성화면입니다^^



또 하나 알게된 점은 음~

PC버전에서는 페이스북,트위터,구글플러스만 떴는데

모바일에서 확인해 보니까 카카오톡, 카카오스토리 2개 버튼이 더 추가되어 있네요^^

이것은 차차 연구해봐야겠습니다^^


-아래에 댓글을 남겨주십시오^^ - 



Comments