- 浏览: 143309 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
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核心的浏览器里查看。
发表评论
-
移动web资源整理
2016-05-12 10:42 5072013年初接触移动端,简单做下总结,首先了解下移动we ... -
怪异模式(Quirks Mode)对 HTML 页面的影响
2015-02-02 11:49 965怪异模式(Quirks Mode) ... -
强制不使用“兼容性视图”的HTML代码
2015-02-02 11:04 649强制不使用“兼容性视图”的HTML代码 在IE8浏览器以后 ... -
web前端新入培训
2014-08-18 09:43 719新人培训计划 第一周html+css 1.从零开 ... -
样式优先级
2014-07-10 11:53 493从上到下执行原则 样式优先级: 高到底 1~ ... -
IE对CSS样式表的限制和解决方案
2014-05-27 17:19 587HTML文档与CSS的关联常见有4种方式: 使用li ... -
定义文档兼容性,让IE按指定的版本解析我们的页面
2013-10-19 11:00 834使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HT ... -
CSS3 icon font完全指南
2013-10-10 11:29 623大家都知道现在各个浏览器都支持CSS3的自定义字体(@fon ... -
css ie6 下的png
2013-06-28 18:33 671.classPng{ position: absolute; ... -
<meta http-equiv="X-UA-Compatible" content="IE=7" />意思是将IE8用IE7进行渲染,使网页在IE8下正常显示
2013-06-26 14:54 864<meta http-equiv="X-UA ... -
css 将图片进行编码,然后存在文档中,减少请求数
2013-03-29 15:07 607background-image: url(data:ima ... -
响应式布局这件小事
2013-02-28 11:49 821讲到响应式布局, 相 ... -
CSS 在IE6, IE7 和IE8中的差别
2012-11-27 16:48 2154选择器与继承 伪类与伪元素 属性支持 其它各种技 ... -
CSS3动画库,很棒哦
2012-05-17 11:30 751官网地址Animate CSS官网地址 Github地 ... -
IOS下Safari渲染Transition时页面闪动Bug
2012-05-17 11:30 5878http://classjs.com/category/tec ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
91uu浮云【javascript实现】
2012-05-03 12:55 1167上一章节我们讲到,webo ... -
91uu浮云【桌面webapp块的实现方案】
2012-05-02 16:43 1083上一节说到这个简单类似网络收藏夹的webos,那么我们要怎么配 ... -
91uu浮云【排版布局】
2012-05-02 12:43 1252上一篇 91uu浮云【简介】只是很简单的贴图出来跟站点出 ... -
css透明度
2012-05-01 22:27 787filter:alpha(opacity=50); - ...
相关推荐
心血制作,总结了移动端开发中遇到的问题 踩过得坑。心血制作,总结了移动端开发中遇到的问题 踩过得坑。心血制作,总结了移动端开发中遇到的问题 踩过得坑。心血制作,总结了移动端开发中遇到的问题 踩过得坑。
我非常热爱本职工作,能够严以律己,遵守工程部的各项制度,保持对工作负责的工作态度,谦逊学习,积极进取,不断提高自己的技术水平,力争把领导分配的每一项任务做的最好。
1.在ios设备上 2.用数据线连接mac电脑 3.ios设备上用Safari打开你要调试的网页 4.打开电脑端的safari 5.跳出web检查器,进行调试
移动端开发的部分总结文档,移动端开发人员可以参考学习和借鉴。
2.开发一个移动端的页面最终是要呈现在手机上的,但是我们的开发人员在平时的开发过程中是要经常去做一些调试的,这个时候我们就可以利用浏览器给我们提供的手机模拟器开查看在手机上的效果。 右键----检查----找到...
主要为大家详细介绍了Turn.js实现很棒的翻书效果,对Turn.js翻书效果的实现进行总结,感兴趣的小伙伴们可以参考一下
移动端开发的总结性材料,文档中以ios为基础来写,不过思路适合整个移动端开发
移动端H5开发的一些总记
-webkit-tap-highlight-color:transparent; *{ -webkit-tap-highlight-...以上所述是小编给大家介绍的移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法 ,希望对大家有所帮助,如果大家有任何疑问请
本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案。CSSpixels:浏览器使用的抽象单位,主要用来在网页上绘制内容。devicepixels:显示屏幕的的最小物理单位,每个dp包含自己的颜色、...
NULL 博文链接:https://maoting.iteye.com/blog/2268992
mobileTechA useful tools or tips list for mobile web application developing这个项目收集移动端开发所需要的一些资源与小技巧一些非常重要的工具类网站css3渐变在线制作器移动端手势表webkit独有的样式分析##...
1.3 小结 4 第2章 React Native 工作原理 5 2.1 React Native 是如何工作的 5 2.2 渲染周期 7 2.3 在React Native 中创建组件 2.4 宿主平台接口 11 2.5 小结 12 第3章 构建你的第一个应用 13 3.1 搭建环境 ...
移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战,总结了一套移动端适配的方案——flexible方案。
来自的一些移动端经验总结干货 本资料很多引用了指尖上的js系列,在此向作者表示感谢 meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-...
本次PPT涉及微信在移动端弱网络环境下的一些实践和总结,因本PPT相关的视频资料已不可查,而PPT中的部分技术较为专业且概括,建议有一定IM开发经验的同行下载,IM开发初学者可暂时不用考虑下载。
9.3 如何着手开发小程序 129 9.4 页面生命周期 130 9.3.2 前端开发者 130 9.3.3 后端开发者 130 9.5 小程序组件和API 134 9.6 小程序登录 134 9.7 小程序微信支付 140 9.8 小结 145 第10...
这个项目是啥 Vue 移动端新项目模板,封装了 H5 项目开发中一些比较常用的功能,...几个移动端开发中可能会用到的组件 开发环境下引入 vconsole 进行调试 axios 封装,拦截器配置,接口定义模块 postcss-px-to-viewpo