首页 / 知识

HTML5开发Web移动端APP技巧笔记知识分享

2023-04-11 13:54:00

　　一、以配置移动开发环境的方法

　　很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试，其实很简单，只要有以下几个原材料就可以了：

　　1、XAMMP或其他集成环境

　　2、自己能用电脑开一个WiFi热点

　　3、有一个移动设备，并且连接到服务器所在电脑的WiFi上

　　接下来就可以在手机里像浏览正常网页一样浏览服务器的网页了。

　　首先打开控制台，输入-ipconfig获取你电脑的ip地址，比如获取到的ip地址为177.34.22.1（注意这里绝对不要写127.00.1，那个是虚拟的本地服务器地址！）

　　然后将你的手机连接到WiFi，打开一个手机浏览器，在上面输入url地址：

　　177.34.22.1:8080/路径地址

　　点击进入，这样就可以在手机里看到本地服务器里的页面了！测试成本是不是很低！

　　二、移动设备HTML代码基本结构

　　在这有两个地方很重要：

　　1、<!doctype?html>:这句话表示的是HTML5的文件类型定义

　　2、<meta?name=”viewport”？content=”width=device-width,?initial-scale=1.0”>:这句话设置页面宽度为屏幕宽度，并设置initial-scale=1.0禁用浏览器的缩放

　　三、清楚HTML5默认样式

　　作为资深的前端开发者，相信这一步大家都不会陌生了，当然也有专门的css文件可以直接引入去除默认样式，但作为一个环节，还是在这写一下吧：

　　article,aside,canvas,details……（各种省略）{

　　margin:0;

　　padding:0;

　　border:0;

　　font-size:100%;

　　font:inherit;

　　vertical-align:baseline;

　　}

　　四、响应式设计

　　响应式设计非常有用，接触前端久一点的人应该都深入的学习过，主要就是通过media?query的方式进行设计，例如：

　　@media?screen?and?（min-width:480px）{

　　//样式

　　}

　　这句话就说明了屏幕的宽度大于480的时候显示的样式

　　五、关于图标

　　要为自己设计的web移动端应用设计一个桌面图标是很炫酷的，在HTML5中这个也很好实现，比如在苹果手机中：

　　<link?rel=”apple-touch-icon-precomposed”？sizes=”72*72”？href=”apple-touch-icon-114*

　　114-precomposed.webp”>