모바일 썸네일형 리스트형 모바일 사이드메뉴 관련 종로구청 종로구청 리뉴얼시 사용할 사이드메뉴 더보기 미디어쿼리 강남구청 부트스트랩 더보기 반응형 meta 태그 더보기 반응형 오른쪽 메뉴 정보화교육 소개강좌 및 신청안내강좌 신청신청/이수 확인공지사항자료실 더보기 모바일에서 볼때 width100% 잘리는 증상 모바일에서 위 사진처럼 우측의 일정 부분이 오른쪽 경계와 맞지 않습니다. 이는 해당부분에 넓이값을 100%로 주어서 나타나는 것인데요. 바로 PC화면에서의 100%와 모바일에서의 100% 인식이 다르기 때문에 나타나는 현상이라고 합니다. 사실 정확한 해결책은 모르겠습니다만 이것저것 해보다 보니 발견한것이 바로 뷰포트 메타태그를 이용하는 것인데요. 사이트의 사이에 코드를 넣어 주는 것입니다. 만약 사이트의 넓이가 1024px 이라면 위 코드의 빨간색 부분에 1100px; 같은 큰수를 넣어줘 버리는 것이죠. 정확한 방식은 아니지만 pc전용 사이트를 만들때 쓸만한 방법이 아닐까 생각이 듭니다. 모바일에서 pc용사이트를 보았을때 오른쪽 잘림이 발생한다면 한번 사용해 보시기 바랍니다. [출처] 모바일에서 pc용사.. 더보기 <meta content="width=960" name="viewport"> 몰랐던 사실.. 핸드폰에서 일반 사이트 접속시.. 사이즈 간격이 100% 다 보여지지 않는다 margin:0 auto 도 먹지 않고 왼쪽으로 쏠려서 보여진다 이럴때는.. 전체 width 값을 공통으로 맞추고 써주면.. 그 간격 안으로 만 전체가 보여진다.. 좋은거 알았다. 핸드폰에서 일반 사이트에 접속에 이런 문제가 있는 줄은.... 더보기 모바일 사이트로 포워딩 스크립트 더보기 모바일 width값 320 대응 짤때 코드 기준 스케일링을 절반으로 두고.. width값을 640으로 잡아서.. 320가로값 대응 더보기 오페라 드래곤 플라이 더보기 구글 맵 모바일 적용 소스 더보기 swip 다른거 한개 더 이전 다음 버튼과 하단에 이동시 O 더보기 swip 모바일 쓸만한 버전 기본 스위피 https://github.com/bradbirdsall/Swipe#whos-using-swipe 더보기 모바일 코딩시 쓰는 코딩[펌] 자료 출처http://biew.co.kr/20 화면 회전시 폰트사이즈 고정 body {-webkit-text-size-adjust:none} 페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.-webkit-text-size-adjust의 3가지 속성 auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절none : 폰트사이즈 고정n% : 폰트사이즈를 지정된사이즈로 변경 ------------------------------------- 모바일 웹페이지를 가로크기에 맞추기 스마트폰에서 랜더링 시켰을경우 터치를 통한 .. 더보기 모바일 유용한 스크립트 meta태그 기본 해당 브라우저에서 화면에 맞게 자동 조절 user-scalable=no : 사용자의 확대보기 허용 여부(no/yes) initial-scale=1.0 : 페이지 로딩시 확대비율 maximum-scale=1.0 : 최대확대비율 minimum-scale=1.0 : 최소축소비율 width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐. target-densitydpi=medium-dpi : dpi([dots per inch])를 머... 맞추라는 거겠지여? 아닌가.. ㅎㅎ 위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다. 그 외에 메타태그 아이폰 사파리에서 전화번호 링크를 마음대로 하는 경우가 있는데 그럴 경우 이.. 더보기 모바일 이미지맵 만드는 법 .imagemap {position:relative;width:device-width;} .link1 {position:absolute; bottom:26%; left:21.5%; width:27%; height:7%;} .link2 {position:absolute; bottom:16%; left:34%; width:42.5%; height:4.5%;} 더보기 모바일 전화 링크 해외전화번호, 더보기 css , 스크립트 등등 가로방향일때 -> 세로방향일때 -> 현재 접속한 기기가 'iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson','Windows Phone' 기기이면 "이동할 주소로 이동시켜주는 스크립트 입니다." 더보기 [모바일페이지] 주소창 자동숨김 더보기 안드로이드 네비게이션 안드로이드 네비게이션 높이는 75 , 아이콘 사이즈는 50X50 더보기 모바일 폐이지 보호되어 있는 글입니다. 더보기 모바일 웹 관련 http://ojtiger.com/146 더보기 모바일 페이지 제작함에 있어 필요 스크립트 * 모바일 페이지 제작함에 있어 필요 스크립트.(header 부분) **페이지가 로드 되었을때 주소창 부분이 자동으로 없어져 가독성을 높임( 스크롤이 생기는 긴페이지 일경우.) window.addEventListener("load", function(){ setTimeout(loaded, 100); }, false); function loaded(){ window.scrollTo(0,1); } ** 전화자동걸기 태그 방지. 전화번호 형식의 경우 자동전화걸기로 연결되는데 이를 방지. ** 디바이스가 다른 해상도에 맞춰 100%로 최적화 되도록 보여줌. **배경이미지가 있을경우 사용자가 단말기를 가로/세로 방향을 감지하여 해당 배경이미지로 대체하여 보여줌. ** webkit 기반의 브라우저에서 텍스트사이즈가.. 더보기 모바일 브라우저 테스트 도구 http://hyeonseok.com/pmwiki/index.php/Mobile/Emulator 더보기 모바일 페이지 제작 방법 http://ojtiger.com/146 더보기 이전 1 다음