本篇文章给大家谈谈h5手机端页面开发，以及html5开发手机端网页对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何利用html5开发android界面
• 2、（1）ios 调试 H5页面
• 3、前端er们如何最快开发h5移动端页面

如何利用html5开发android界面

H5开发安卓界面需要注意以下三点：

（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础

（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试

（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建

进入正题

● Android设备多分辨率的问题

Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示

Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

三种解决方式：1 viewport属性 2 CSS控制 3 JS控制

1 viewport属性放在HTML的meta中

html代码：

span style="font-size: x-small;" head

titleExmaple/title

meta name=”viewport” content=”width=device-width,user-scalable=no”/

/head/span

meta中viewport的属性如下：

span style="font-size: x-small;" meta name="viewport"

content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] ,

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi |

high-dpi | medium-dpi | low-dpi]

"

/

/span

2 CSS控制设备密度

为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）

html代码：

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /

3 JS控制

Android浏览器和WebView支持查询当前设别密度的DOM特性

window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）

JS中查询设备密度的方法

js代码：

if (window.devicePixelRatio == 1.5) {

alert("This is a high-density screen");

} else if (window.devicePixelRation == 0.75) {

alert("This is a low-density screen");

}

Android中构建HTML5应用

使用WebView控件 与其他控件的使用方法相同 在layout中使用一个WebView标签

WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。

（1）ios 调试 H5页面

我们使用safari 浏览器 + ios手机的方式进行页面调试。

打开safari浏览器，并使其处于窗口的最上层。点击顶部工具条的 “Safari浏览器” 选项，选择偏好设置，然后选择高级选项，在弹出框底部勾选 “在菜单栏中显示‘开发’菜单”。

打开手机的设置 - Safari浏览器 - 高级 - 打开网页检查器

手机连接电脑有三个注意点：

1、手机和电脑需要连接在同一个网络中

2、手机用数据线连上电脑

3、如果是vue项目，需要修改一定的配置再启动项目：

原先的配置是localhost，我们需要将其改成电脑的IP，这样手机才能正常访问。

完成以上操作以后，就可以用手机浏览器打开相应的网页，然后在电脑端的 “开发” 选项中就能看到连接的手机，打开网页检查器，这样就能调试H5页面了。

前端er们如何最快开发h5移动端页面

移动端，需要注意的比较多，但也方便了前端工作，因为不用考虑兼容。

正常HTML CSS JS 肯定是要回的。

HTML5 CSS3 Zepto 这个也要会的。手机的动画能用H5 /CSS3写 就不要用js写。

还有框架，如果会那就更好了。因为框架主要就是为了方便维护，快捷，高效的生产代码

关于h5手机端页面开发和html5开发手机端网页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。