모바일 사이트에 접속시 해당 브라우저의 상단은 대부분 주소입력 창이 차지한다.


브라우저 기본 UI는 페이지가 로딩 된 후 자동으로 사라지게 하는 소스가 있다.



<link rel="apple-touch-icon-precomposed" href="app_icon.png"/>

<link rel="apple-touch-icon" href="app_icon.png"/> 아이폰 전용



아이폰 안드로이드 동시 사용가능한 자바 스크립트


<script type="text/javascript">

window.addEventListener("load", function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);

</script>


페이지가 로딩되면서 자동으로 브라우저 기본 상단 UI가 사라지면서 내용이 나타나므로 사용자들이 편리하게 사용할 수 있다.




'JAVA > 모바일 HTML & CSS' 카테고리의 다른 글

Mobile HTML 페이지 크기제어  (0) 2015.08.21
Mobile HTML Native App 과 Web App  (0) 2015.08.21
Mobile HTML 모바일 정의  (0) 2015.08.21
블로그 이미지

왕왕왕왕

,

각 디바이스의 크기에 맞게 제공되어야 하므로 가로 값은 device-width로 설정해서 최적화 시킨다.


<meta name="apple-mobile-web-app-capable" content="yes" />


가장 기본적인 메타태그

<meta name="viewport"

content="width=device-width, initial-scale=1.0 maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />


width=device-width 

각 디바이스의 해상도에 맞춰서 보일 수 잇도록 설정


initial-scale

페이지가 보이는 기본비율,(아이폰의 경우 스케일이 1이면 가로 320px에 맞춰진다.)


maximum-scale

페이지가 보이는 최대비율


minimum-sdale

페이지가 보이는 최소비율


user-scalable

사용자가 디바이스에서 확대가능여부


블로그 이미지

왕왕왕왕

,

Native App


각 디바이스에 최적화되어 제작되는 앱을 말한다. 아이폰이나 안드로이드, 블레베리 앱스토어,마켓,앱월드 등을 통해 해당 운영체제에서 요구한 언어와 기능 등을 기반으로 개발되어 있는 앱이다.


해당 디바이스에 최적화되어 제공할 수 잇다는 장점이잇다.

서비스를 각 os단말마다 제공해야 하므로 많은 시간과 비용이 드는 단점이 있다.



Web App


웹 앱은 말 그대로 웹으로 구현하는 앱, 애플리케이션이다. 특별히 다른 언어로 제작되어 잇는 것은 아니지만, 아이폰의 경우 메타태그를 이용하여 웹이지만 네이티브 앱처럼 표현할 수 있다. 



웹 앱과 모바일 웹에서 사용되는 특별한 메타태그

모바일 디바이스에서 확대.축서기능 여부와 크기가 다른 디바이스와 관련된 부분이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />


Hybrid App


하이브리드 앱은 두가지 기술을 섞어놓은 기술이다. 







블로그 이미지

왕왕왕왕

,

모바일의 정의

일반 pc용 웹사이트에 비해서 가볍고 간단하고 쉬운 UI를 지닌 것이 특징이며 휴대성을 지닌 디바이스의 특성 때문에 그에 맞는 LBS(Location-Basesd Service) 등 다양한 기술과 접목해서 활용되는 특징이있다.


모바일 웹의 두가지 분류


WAP(무선서비스)

WAP(Wireless Application Protocol)이라고 불리는 무선 서비스가 있다. WAP서비스는 무선망 설비에서 무선단말기 및 이에 필요한 시스템 SW 등 표준을 포함하고 있으며 기존 인터넷 표준에 기반하고 있으므로 WML및 HTML을 지원하고 있으나 다양한 태그를 지원하지는 못한다.


HTML/XHTML/HTML5(유선서비스)

HTML/XHTML 부분을 따로 빼놓은 이유는 기존 WAP브라우저에서도 가능은 하지만 많은 태그들이 호환이 안되므로 우리가 혀냊사용하고 있는 스마트 폰의 모바일 웹을 따로 자세히 알아보기 위해서 나눴스빈다. 일반 pc용 웹사이트에서 제작하는 방식대로 만든 웹사이트입니다. 이런 모바일 웹코딩 혹은 모바일 UI개발 이라고 불리는 부분은 유선 서비스를 가르키는 것이다.

블로그 이미지

왕왕왕왕

,