移动端常用知识点

对移动端的开发也不是非常了解，只是做过一些手机端项目，小编今天在这里整理一些常用的移 动开发知识点，有兴趣的朋友也可以了解一下，当然，如果有所补充，也可发email给小编哦～ ～～

1、viewport ：所谓viewport，即除去所有工具栏、状态栏、滚动条等之后用于查看网页的区域，假设现在有一张报纸摆在你面前，但是这张报纸被一本书压住了，所以你只能看到报纸的一部分，这部分的可视区域就是指viewport；


1

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

width = device-width : 设置将宽度设置为设备显示宽度；
initial-scale : 初始的缩放比例 (范围从 0 到10)；
maximum-scale : 允许用户缩放到的最大比例；
minimum-scale : 允许用户缩放到的最小比例；
user-scalabl : 用户是否可以手动缩放；

2、在HTML代码中，我们一般通过<meta>进行控制
编码（这个大家应该不陌生）：


1

<meta charset="utf-8" />

屏蔽iPhone下的拨号链接:


1

<meta name="format-detection" content="telephone=no">

隐藏safari导航栏以及工具栏，全屏显示网页：


1

<meta name=”apple-mobile-web-app-capable” content=”yes” />

3、如果你想在屏幕旋转时禁止设备自动调整大小：


1

-webkit-text-size-adjust:none;

4、<a href="sms:10010" class="message"></a>  //调取手机短信
<a href="tel:10010" class="call"></a> //调取电话

5、侦测设备旋转方向
iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

window.onload = function initialLoad() {updateOrientation();}    

function updateOrientation(){

    var contentType = "show_";

    switch(window.orientation){

        case   0: contentType += "normal";

                  break;   

        case -90: contentType += "right";

                  break;

        case  90:  contentType += "left";

                  break;

        case 180: contentType += "flipped";

                  break;

    }

    document.getElementById("page_wrapper").setAttribute("class", contentType);

    }

6、默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去，代码如下：


1

2

3

window.addEventListener(‘load‘,function(){

   setTimeout(scrollTo,0,0,1);

},false);

7、触摸事件
当用户手指放在屏幕上面时，在屏幕上滑动时或从屏幕上移开时会触发一些相关事件，这类事件称之为触摸事件，有以下几个：
touchstart  : 当手指触摸屏幕时触发，即使已经有一个手指放在了屏幕上也会触发
touchmove : 当手指在屏幕上滑动时连续的触发
touchend : 当手指从屏幕上移开时触发
touchcance : 当系统停止跟踪触发是触发，关于此类事件的确切触发时间，文档中没有明确说明

上面这几个事件都会冒泡，也都可以取消，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：
bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,ctrlKey,shiftKey,metaKey

除了常见的DOM属性外，触摸时间还包含下列3个用于跟踪触摸属性：
touches : 表示当前跟踪的触摸操作的Touch对象的数组
targetTouches : 特定与事件目标的Touch对象的数组
changeTouches : 表示自上次触摸以来发生了什么改变的Touch对象的数组

每个触摸对象包含下列属性：
clientX : 触摸目标在可视区中的X坐标
clientY : 触摸目标在可视区中的Y坐标
pageX :  触摸目标在页面中的X坐标
pageY :  触摸目标在页面中的Y坐标
screenX : 触摸目标在屏幕中的X坐标
screenY : 触摸目标在屏幕中的 Y坐标
target ： 触摸的DOM节点目标 identifier : 标识触摸唯一ID

移动端常用知识点

时间： 2024-12-14 18:48:10

移动端常用知识点的相关文章

web移动端常用知识点笔记

摘要:因为平时搞移动端的比例多一点,做个小小的总结.虽然网上很多这方面的总结,不过还是想自己也总结一下,适合自己的才是最好的.这样也方便以后自己的查阅 viewport模板——通用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 --> <meta content="width=device-

CSS3常用知识点

CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa"] { //TODO } /* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/ .attr3 a[class|="kawa"] { //TODO } /* E[attr*=val] 表示的属性值里包含val字符并且在&

Mongodb数据库命令端常用操作

查询操作 Mongodb-SpringMvc下Query数据库操作SQL http://blog.csdn.net/xiaohulunb/article/details/27828381 1.查询所有 > db.foo.find() { "_id" : ObjectId("5389aa1df06b88aaa313746a"), "name" : "yiwa", "age" : 25, "us

移动端开发知识点总结

在去年的这个时候,开始慢慢接触到移动端,接触移动端并不早.但那时查找相关资料不是很多(没技术,找不到),只有在慢慢的摸索敲打代码中寻找方法!记得那时一直纠结为什么别人的图片在手机上那么清晰,而我们做的就那么的模糊,后来听过放大图片,之后用代码缩小,才保证在手机上清晰.(后面才了解到是DPI, retina 2x 的问题). 废话少说,进入正题! 以下为移动端需要的知识点整理: 1)移动端屏幕多种多样,DPI(像素密度)不同,越高图像越清晰.而普通android手机和iphone手机的分辨率的基本

java学习中，接口的使用（重要，常用知识点）（java 学习中的小记录）

java学习中,接口的使用(重要,常用知识点)(java 学习中的小记录)作者:王可利(Star·星星) 接口(功能:用来添加拓展功能的) 例子:铅笔.带橡皮檫的铅笔. 两个功能:     1.写字......> 铅笔     2.擦字......> 橡皮擦 想法:定义一个铅笔类,定义一个橡皮擦类,定义一个带橡皮擦的铅笔类继承 铅笔类和橡皮擦类 但是java是单继承的.于是就有了解决的方法:接口(可以添加拓展功能) 如:一个铅笔类,给它添加一个接口给它一个拓展类(橡皮擦类) 接口的定义模式 用

php 常用知识点

1,运算优先级 $a = 3; $b = 5; if ($a=5 || $b = 7) { $a++; $b++; } echo $a."#".$b; //结果 1#6 //逻辑运算符优先级高于赋值运算符,var_dump(3 || $b=4) 结果为bool(true) ,所以$a也为bool(true),值永远为1,不会自加.$b并没有被赋值,所以值还是5,结果就是5+1=6: $a = 3; $b = 5; if ($a=5 && $b = 7) { $a++;

端游、手游服务端常用的架构是什么样的？ 源码下载

本文引用于:征途源码论坛(www.zhengtuwl.com)-----专注各类免费精品源码下载的平台 类型1:卡牌.跑酷等弱交互服务端卡牌跑酷类因为交互弱,玩家和玩家之间不需要实时面对面PK,打一下对方的离线数据,计算下排行榜,买卖下道具即可,所以实现往往使用简单的 HTTP服务器: <ignore_js_op> 登录时可以使用非对称加密(RSA, DH),服务器根据客户端uid,当前时间戳还有服务端私钥,计算哈希得到的加密 key 并发送给客户端.之后双方都用 HTTP通信,并用那个key

javascript常用知识点总结

一.常用知识点 1.赋值 var x=10 y=x console.log(x) #10 console.log(y) #10 2.比较运算符 == | === console.log("5"==5)#True 只做值比较 console.log("5"===5)#False 比较值及类型 != | !== console.log("5"!=5)#False 只做值比较 console.log("5"!==5)#True 比较

css的常用知识点

一.css的引入方式 1.行内引入 直接在标签中定义样式 <p style="background-color: red">test</p> 2.嵌入式引入 将css代码通过<style></style>标签,直接写在文件中 <head>     <meta charset="UTF-8">     <title>Title</title>     <style&g