angular开发手机网页小记

禁用滑动事件,阻止触发浏览器翻页行为 <html lang="en" style="height:100%" ontouchmove="(function(){window.event.preventDefault();})()">…

问题的产生因为各方面原因,要用网页做界面,开发一个APP.内核使用的是腾讯的x5内核. 把外壳交给前端和设计测试的时候,都汇报:状态栏的颜色太不搭配了,要求可修改遂启用了安卓4.4版本开始支持的沉浸式状态栏,打算把状态栏交给前端去自己绘制. 并提供了API,可以获取状态栏的高度. 没多久,前端报告,返回的高度有问题,比状态栏高很多. 于是我测了下,api返回的状态栏高度:55像素. 使用安卓开发者工具里的坐标测量工具测了下,状态栏高度的确是55像素左右让前端好好检查他的代码. 然而前端…

HTML5开发手机应用--viewport的作用

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp…

[Cordova] 手机网页里的1px

[Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素.而是会依照尺寸.分辨率等等数值,计算出一个倍率值,在屏幕上做等比的显示.也就是说,HTML页面里的1px,在不同的手机上,可能会以两个屏幕像素.或是三个屏幕像素来做显示. 相关的技术细节可以参考下列资料: 移动端尺寸基础知识 - 可乐橙的私房demo Chrome开发者工具,对于手机网页1px的支…

手机网页调试利器： Chrome

新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先下载Chrome 浏览器:http://rj.baidu.com/soft/detail/14744.html?ald 在你要调试的网页或是本地页面中.按F12 打开调试器.(即开发者模式) Chrome V35 版本中的开发者工具分为 8 个大模块,每个模块及其主要功能为: Elemen…

HTML5开发手机项目—个人总结

让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" /> 发确保网页的效果 2) 加上以下语句可使网页在苹果设备上运行更好 <m…

[书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

目录第I篇手机版专用网站设计和开发入门篇第1章准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用Mobile Safari 6 1.2 使用IEMobile测试网页 7 1.2.1 Windows Phone 7 Emulator安装 8 1.2.2 使用IEMobile 9 1.3 使用Chrome Lite测试网页 10 1.3.1 Android Emulator安装 10 1.3.2 使…

开发手机APP的神器 --- ionic

前言在如今的生活中,手机已经与我们的生活紧紧的联系在了一起.而手机APP更是其中,重要的一环.今天,影子就为大家介绍一种开发手机APP的超级神器---ionic. ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CSS 和 Javascript 构建接近原生体验的移动应用程序. ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互…

vConsole--针对手机网页的前端 console 调试面板。

一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://wechatfe.github.io/vconsole/demo.html 使用方法 1.下载模块 checkout 文件 dist/vconsole.min.js 到本地. 2.引入模块 (1) 如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块.为了便于后续扩展,建…

Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器教程简单,不会的趣闻度娘 3 Visual Studio Code需要安装的插件 3.1 Debugger for Chrome 用于直接在谷歌浏览器中调试Angular应用 3.2 Angular5 Snippets 代码生成插件,主要用于在VSCode中快速生成代码 4 Chrome需要安装的插件 4.1 Augury插件用于在谷歌浏览器中查看Ang…