`
caibinghong
  • 浏览: 150774 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

移动端开发小结

 
阅读更多

 

1.viewport

viewport就是除去所有工具栏、状态栏、滚动条等等之后网页的可视区域。
移动设备屏幕宽度不同于传统web,因此我们需要改变viewport,有以下属性:

1 width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
2 height - // viewport 的高度 (范围从223 到10,000)
3 initial-scale - // 初始的缩放比例 (范围从>0 到10)
4 minimum-scale - // 允许用户缩放到的最小比例
5 maximum-scale - // 允许用户缩放到的最大比例
6 user-scalable - // 用户是否可以手动缩 (no,yes)

在具体开发的时候,要设置html中,如下:

1 <pre><meta charset="utf-8" /> //编码
2 <meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1.0; user-scalable=no;"/>
3 <meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧
4 <meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏
5 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式
6 <meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码</pre>
7 <p><meta name="apple-mobile-web-app-capable" content="yes"><br>
8 <meta name="apple-mobile-web-app-status-bar-style" content="black"> // 隐藏状栏
9 </p>

一旦设置了,在设计的时候就可以1:1的方式来设计页面了,不会有滚动条。

2.样式类

01 <pre><link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
02 <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
03 <link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css">    // 肖像模式样式
04 <link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"   // 横屏模式下的样式
05 //竖屏时使用的样式
06 <style media="all and (orientation:portrait)" type="text/css">
07 #landscape { display: none; }
08 </style>
09 //横屏时使用的样式
10 <style media="all and (orientation:landscape)" type="text/css">
11 #portrait { display: none; }
12 </style></pre>
13 <pre></pre>

3.方向变化(orientationchange)

手机查看模式一般有两种,a.肖像模式 b.横屏模式,在webkit内核浏览器中,我们可以通过事件来监听手机是否改变了查看模式。在脚本中可以通过window.orientation访问。

1 EventUtil.addHandler( window, 'load'function( event ) {
2 var div = document.createElement('myDiv');
3 div.innerHTML = 'Current orentation is' + window.orientation;
4 document.body.appendChild( div );
5 EventUtil.addHandler( window, 'orientationchange'function( event ) {
6 div.innerHTML = 'Current orentation is' + window.orientation;
7 });
8 });

在你的手机端访问http://classjs.com/demo/phone/03/orient.html,切换两种方式来查看该网页,试试效果吧。
是不是很奇妙,肖像模式为:0,横向模式为:90,好了就到这里了,洗洗脑袋,充分发挥你的创意吧。

4.触摸事件

当用户手指放在屏幕上面时,在屏幕上滑动时或从屏幕上移开时会触发一些相关事件,这类事件称之为触摸事件,有以下几个:

1 touchstart //当手指触摸屏幕时触发,即使已经有一个手指放在了屏幕上也会触发
2 touchmove //当手指在屏幕上滑动时连续的触发
3 touchend //当手指从屏幕上移开时触发
4 touchcancel //当系统停止跟踪触发是触发,关于此类事件的确切触发时间,文档中没有明确说明

上面这几个事件都会冒泡,也都可以取消,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,ctrlKey,shiftKey,metaKey
除了常见的DOM属性外,触摸时间还包含下列3个用于跟踪触摸属性:

1 touches // 表示当前跟踪的触摸操作的Touch对象的数组
2 targetTouches // 特定与事件目标的Touch对象的数组
3 changeTouches // 表示自上次触摸以来发生了什么改变的Touch对象的数组

每个触摸对象包含下列属性:

1 clientX // 触摸目标在视口中的X坐标
2 clientY // ~Y坐标
3 identifier // 标识触摸唯一ID
4 pageX // 触摸目标在页面中的X坐标
5 pageY //~Y坐标
6 screenX //触摸目标在屏幕中的X坐标
7 screenY // ~Y坐标
8 target //触摸的DOM节点目标

关于触摸目标可以看看这个http://classjs.com/demo/phone/03/touchdetail.html,对了别忘了在手机端的webkit核心的浏览器里查看。

分享到:
评论

相关推荐

    移动端开发工作总结

    ### 移动端开发工作总结与计划 #### 一、2015年工作总结 ##### 工作成就 - **项目完成情况**:2015年,在网络部领导的指导下,王俊林作为软件工程师成功完成了“兰州金易信息科技有限责任公司”门户网站及手机...

    这个项目收集移动端开发所需要的一些资源与小技巧

    4. **最佳实践**:项目可能总结了移动端开发中的最佳实践,如响应式设计、离线存储策略、性能优化技巧等。 5. **社区链接**:可能包含一些相关的论坛、社区或GitHub仓库链接,供开发者交流和获取更多资源。 总之,...

    移动端开发常见问题总结

    ### 移动端开发常见问题总结 随着移动互联网的飞速发展,移动端开发变得尤为重要。在实际项目中,开发者会遇到各种各样的技术难题。本文将根据提供的内容,深入探讨移动端开发过程中常见的问题及其解决方案。 ####...

    aermin#blog#web移动端开发总结2-调试篇1

    1.在ios设备上 2.用数据线连接mac电脑 3.ios设备上用Safari打开你要调试的网页 4.打开电脑端的safari 5.跳出web检查器,进行调试

    移动端开发教程

    总结来说,移动端开发教程的核心在于手机中间件,它为开发者提供了便捷的开发环境,实现了跨平台的目标。通过对“数字天堂”、“手机中间件”和“无线中间件”的学习,开发者可以提升自己的技能,适应不断变化的移动...

    移动端开发-编码规范等总结

    尤其在苹果的Cocoa框架下,遵循一套有效的编码规范显得尤为重要,下面我们就对移动端开发中的编码规范进行一个深入的总结。 首先,命名约定是编码规范中至关重要的一环。命名的恰当与否,直接关系到代码的清晰度。...

    基于Hybrid APP和私有云平台发布的移动端开发设计.pdf

    总结来说,基于Hybrid APP和私有云平台的移动端开发设计旨在平衡开发效率、用户体验和成本效益。这种方案特别适用于需要跨平台支持、快速迭代并且重视信息安全的企业和组织。通过这种方式,团建信息化管理系统可以...

    web移动端和PC端利用chrome同步开发调试

    "Web 移动端和 PC 端 Chrome 同步开发调试" 在现代 web 开发中,移动端和 PC 端的开发调试一直是一个挑战性的问题。为了解决这个问题,Chrome 浏览器提供了一种同步开发调试的方法,可以将移动端和 PC 端的开发调试...

    敏捷框架移动端开发环境安装1

    以下是对安装力软移动端开发环境的详细步骤的解析: **一、前言** 在开始力软敏捷开发框架移动端的开发工作前,你需要从微软官网下载Visual Studio 2017的安装包。Visual Studio 2017是一个强大的集成开发环境(IDE...

    vue开发移动端底部导航条功能

    总结来说,Vue开发移动端底部导航条功能主要涉及以下几个关键点: 1. **组件化**:通过创建独立的`Tabbar`组件,实现底部导航的模块化,提高代码复用性和可维护性。 2. **路由链接**:使用`router-link`将底部导航...

    移动端web总结笔记1

    移动端 Web 开发总结笔记 移动端 Web 开发是一个复杂的过程,涉及到多个方面的技术,包括 HTML、CSS、JavaScript、网络协议等。本笔记总结了移动端 Web 开发的一些重要知识点,包括头部定义、触摸事件、页面跳转、...

    D2-淘宝移动端Web开发实践

    ### D2-淘宝移动端Web开发实践 #### 移动端Web开发概述 随着移动互联网的兴起,越来越多的用户开始依赖手机、平板等移动设备来访问网络。为了更好地满足这一趋势,淘宝团队分享了一系列关于移动端Web开发的最佳实践...

    html+css移动端视口总结

    本文主要讨论了移动端开发中的几个核心概念:移动端设备、设备像素比(DPR)、以及视口布局。 首先,移动端指的是任何便于移动的电子设备,如手机、平板电脑和智能手表等。开发人员在构建移动端页面时,通常会在...

    vue实现的旅游页面应用移动端开发

    在"vue实现的旅游页面应用-移动端开发"项目中,我们将探讨如何利用Vue.js来开发一个适用于移动设备的旅游应用。 首先,Vue.js的核心特性包括组件化、虚拟DOM、响应式数据绑定以及指令系统。这些特性使得开发者可以...

    speedPHP模板框架为移动端开发API接口

    总结,SpeedPHP框架为移动端API接口开发提供了便捷高效的工具,它的轻量级设计、强大的功能以及对API友好的特性,使开发者能更专注于业务逻辑,提高开发效率。通过深入学习和实践,你将能够充分利用SpeedPHP的优势,...

    基于webpack的前端工程化多页面入口IE8和移动端开发手脚架

    总结来说,"基于webpack的前端工程化多页面入口IE8和移动端开发手脚架" 是一个全面的解决方案,它结合了 Webpack 的强大功能和对老旧浏览器及移动设备的支持。开发者可以利用这个手脚架快速搭建起符合需求的多页面...

    移动开发app

    ### 总结 选择哪种类型的移动开发技术取决于项目的需求、预算、时间安排以及目标用户等因素。如果追求极致的性能和用户体验,可以选择原生开发;如果希望快速开发并支持多个平台,则Web app或混合开发可能是更好的...

    移动端table固定表头与固定第一列

    在移动端开发中,数据展示通常会使用到表格(table),然而在小屏幕设备上,由于空间有限,如何优雅地呈现表格成为一个挑战。本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能,以提升用户体验,使得...

    基于HBuilder快速开发移动端APP的设计与实现.pdf

    本文总结了基于HBuilder快速开发移动端APP的设计与实现,介绍了HBuilder的基本使用和uni-app框架的应用,以及基于Vue.js框架的跨平台应用前端和PHP语言开发后端的系统框架设计。 1. HBuilder的介绍 HBuilder是...

Global site tag (gtag.js) - Google Analytics