HTML5 모바일 웹사이트 개발 과정_html5 튜토리얼 기술-H5 튜토리얼-php.cn

최근 모바일 웹사이트 개발에 대해 공부하고 있는데, 모바일 웹사이트를 만드는 것이 생각보다 어렵지 않다는 것을 알게 되었습니다. 왜 그런 말을 합니까? 생각해 봅시다. 전통적인 PC 웹사이트도 만들 수 있지만, 작은 모바일 웹사이트도 만들 수는 없을까요? 사실, 모바일 웹사이트는 PC 웹사이트의 축소판일 뿐입니다! 왜 어려운지, 어디서부터 시작해야 할지 모르겠습니다.

다음과 같은 점이 있다고 생각합니다.

1. 완성된 아이디어와 프로세스는 없습니다.

웹사이트를 만드는 과정과 마찬가지로, 그 과정을 알고 계시다면 모바일 홈페이지 구축은 어렵지 않으실 거라 믿습니다! 정말 어려운 점은 전혀 모른다는 것입니다.

2. html5의 기술을 불가해하다고 생각하세요

html5 css3를 사용하여 모바일 웹사이트를 구축하는 방법을 배우는 것은 최고의 무술을 배우는 것과 같습니다. . 사실 당신은 틀렸어요! HTML5에 대해 너무 깊게 생각하지 마세요. 실제로 모바일 웹사이트를 구축할 때 HTML5의 강력한 기능은 많이 필요하지 않습니다. (아마도 기술에 대해 잘 모르는 일부 초보자의 경우: 귀하의 모바일 웹사이트는 HTML5 CSS3로 만들어졌는데, 정말 대단합니다! 인터넷에서 가장 최신의 최첨단 기술을 사용할 수 있습니다. 사실 안목이 있는 사람이라면 누구라도 마찬가지입니다. 어떤 기술이 사용된 걸까요? "비전문가는 설렘을 볼 수 있지만 전문가는 진실을 알 수 있습니다")

자, 이제 이야기를 많이 했으니, 모바일 웹사이트를 개발하는 방법에 대해 이야기해보겠습니다!

기본적으로 모바일 웹사이트를 개발하는 것은 크게 두 가지로 나눌 수 있습니다. 하나는 프레임워크를 사용하여 모바일 웹사이트를 개발하는 것입니다. 한 가지 유형은 손으로 직접 작성한 모바일 웹사이트입니다.

1. 모바일 웹사이트용 프레임워크 개발

일반적으로 사용되는 개발 프레임워크는 현재 가장 널리 사용되는 웹 프론트엔드(BootStrap) 프레임워크인 Jquery 모바일입니다. 물론 가능합니다. 제가 자세히 연구하지 않은 모바일 개발 프레임워크도 있습니다.

BootStrap이 현재 가장 인기 있는 프런트엔드 개발 프레임워크인 이유는 무엇입니까?

부트스트랩은 반응형 레이아웃(그리드 시스템)을 제공하고 모바일 장치 우선 원칙을 구현할 수 있기 때문입니다.

부트스트랩을 사용하여 웹사이트를 개발하면 어떤 이점이 있나요?

1. 디자인을 몰라도 웹사이트는 만들 수 있다

디자인을 몰라도 웹페이지는 멋지게 보일 수 있다 부트스트랩의 도움으로. 강력한 내장 스타일 라이브러리로 작업이 멋지게 보입니다.

주로 반영되는 항목: 글꼴 파일 및 부트스트랩 고유의 UI 스타일. (UI 디자인을 모르는 프로그래머들에게 희소식 제공)

2. 빠르게 시작하세요

문제 해결에만 집중하고, 지루한 부분은 부트스트랩에 맡겨두세요 에 대한. 한 번 개발하면 모든 단말기에 적용할 수 있으며, 빠르게 시작하여 웹사이트 프로토타입을 구축할 수 있습니다. 또한 풍부한 플러그인을 많이 제공합니다. JS를 몰라도 기본적으로 일반적인 API를 이해하고 웹 사이트에 미치는 영향을 해결할 수 있습니다.

단점:

1. 모범 사례를 따르지 않음

Bootstrap을 사용할 때 직면한 가장 큰 문제 중 하나는 DOM 요소가 수많은 클래스로 가득 차 있다는 것입니다. . 이는 좋은 웹 디자인의 기본 규칙 중 하나를 깨뜨리고 HTML에는 더 이상 의미가 없으며 콘텐츠와 프리젠테이션이 더 이상 분리되지 않습니다. 프런트엔드 순수주의자들은 이것이 확장성, 재사용성, 유지 관리를 더욱 어렵게 만든다고 주장하면서 이것이 다소 짜증스럽다는 것을 알게 될 것입니다.

2. 부트스트랩이 너무 무겁습니다

직접 말하면 CSS와 JS는 좀 무겁습니다. CSS는 압축 후 115k, JS는 압축 후 35k

Bootstrap의 모든 기능을 사용하려면 리소스 로딩 시간을 신중하게 고려해야 합니다. 물론 일부 지역에서는 이것이 문제가 되지 않을 수도 있지만 뉴질랜드에서는 인터넷이 태평양을 건너야 하기 때문에 데이터가 거기까지 도달하는 속도가 느릴 것입니다. 따라서 목표 시장을 고려하십시오.

모든 프레임워크에는 장점과 단점이 있다고 생각합니다. 완벽한 제품은 없으므로 실제 상황에 따라 선택하십시오. 다른 프레임워크에 대해서는 당분간 자세히 설명하지 않겠습니다. Baidu를 사용한다면 원하는 답을 찾을 수 있을 것입니다.

모바일 개발 과정

2. 손으로 쓰는 모바일 홈페이지

일반적으로 모바일 홈페이지를 직접 개발한다면 기본적으로는 다음과 같이 나눌 수 있습니다. 두 가지 카테고리가 도착합니다. 한 가지 유형은 웹 페이지 헤더에 메타 태그를 추가하여 달성됩니다(웹 페이지는 HTML5 형식으로 개발됨). 다른 유형은 CSS3의 Media 태그(미디어 쿼리)를 통해 구현됩니다. 미디어 쿼리에 대해 모르는 친구는 반응형 레이아웃 문서를 읽어보세요.

메타태그를 활용하여 모바일 웹사이트를 구축하는 방법을 자세히 설명하겠습니다.

기본적으로 모바일 웹사이트의 프레임워크를 구현하려면 웹페이지 헤드에 메타 태그 4개만 추가하면 됩니다. 메타태그를 살펴보겠습니다.

1. 뷰포트 태그 추가

상세 속성:

width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------  viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

로그인 후 복사

뷰포트에 대한 자세한 원리와 지식은 바이두에 접속하세요. ! 여기서는 자세히 설명하지 않겠습니다.

2. 숫자를 전화번호로 바꾸는 것은 금지되어 있습니다

일반적인 상황에서 IOS 및 Android 시스템은 기본적으로 특정 길이 내의 숫자를 전화번호로 사용합니다. 추가되지 않을 경우 기본적으로 전화번호로 표시되므로 취소가 필요합니다!

3. iPhone 기기의 Safari 개인 메타 태그

즉, 전체 화면 모드 탐색 허용, 브라우저 탐색 표시줄 숨기기

4 .iphone 개인 태그

는 iPhone의 Safari 상단에 있는 상태 표시줄의 스타일을 지정합니다

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

手机网站基本框架代码：

<!doctype html>  
  
<html>  
  
<head>  
  
<meta charset="utf-8">  
  
<title>手机网站</title>  
  
<meta name="keywords" content="" />  
  
<meta name="description" content="" />  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
<meta name="format-detection" content="telephone=no" />  
  
<meta name="apple-mobile-web-app-capable" content="yes" />  
  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
<meta name="author" content="duanliang, duanliang920.com" />  
  
<style>  
  
    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}   
  
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}   
  
</style>  
  
 </head>  
  
    
  
<body>  
  
    <div>  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    </div>  
  
</body>  
  
</html>

로그인 후 복사

下面是我做的基于微信二次开发的手机页面案例：

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。

原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比如：（Android类手机，iPhone5、5s、6、6Plus...）

而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：