HTML5 모바일 웹사이트 개발 프로세스

이 글은 주로 HTML5 모바일 웹사이트 개발 과정을 소개하는 글입니다. 모바일 웹사이트를 개발하고 싶은 친구들은 참고하시면 됩니다.

최근 모바일 웹사이트 개발에 대해 공부해 봤는데, 모바일 웹사이트 구축이 생각보다 쉽지 않더군요. 상상했다. 너무 어렵다. 왜 그런 말을 합니까? 생각해 봅시다. 전통적인 PC 웹사이트도 만들 수 있지만, 작은 모바일 웹사이트도 만들 수는 없을까요? 사실, 모바일 웹사이트는 PC 웹사이트의 축소판일 뿐입니다! 왜 어려운지, 어디서부터 시작해야 할지 모르겠습니다.

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

1. 완전한 아이디어와 과정은 없습니다

웹사이트를 만드는 과정과 마찬가지로 그 과정도 알면 어렵지 않을 거라 믿습니다. 모바일 웹사이트를 만들려면! 정말 어려운 점은 전혀 모른다는 것입니다.

둘째, 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. 뷰포트 태그 추가

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

세부 속성:

width ---- 뷰포트 너비(width=device-width 의미: 너비가 장치 너비와 같음)

height ---- -- 뷰포트의 높이( height=device-height 의미: 높이가 기기 너비와 같음)

initial-scale ----- 초기 크기 조정 비율

minimum-scale ----- 사용자에게 허용되는 최소 비율

maximum-scale로 확대 - ---- 사용자가

user-scalable로 확대/축소할 수 있는 최대 비율 ----- 사용자가 수동으로 확대/축소할 수 있는지 여부

关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。

2、禁止将数字变为电话号码

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

3、iphone设备中的safari私有meta标签

它表示：允许全屏模式浏览，隐藏浏览器导航栏

4、iphone的私有标签

它指定的iphone中safari顶端的状态条的样式

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

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

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

手机网站基本框架代码：

XML/HTML Code复制内容到剪贴板

  
  
  
  
  
  
  
  
  
  
  
  
  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
  
  
  
  
  
  
  
  
  
  
 
  
  
    
  
  
  
    
  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    
  
  
  
  

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

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

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

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

关于手机网站的调试问题

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

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

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

如下图：

手机测试效果图

或者用火狐的测试工具：按shift+ctrl+M进行查看。

写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。

相关推荐：

HTML5触摸事件实现移动端简易进度条的实现方法

위 내용은 HTML5 모바일 웹사이트 개발 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!