作为一名前端开发工程师,从桌面浏览器到移动设备上开发过度时总会遇到一些问题,下面我们就从我自己遇到问题开始学习和总结一些技术要点:
1. viewport:
大家在手机web开发中有没有遇到这样一个问题,在pc浏览器中显示正常但是到了手机浏览器中显示却密密麻麻,字体等变得很小掉,看都看不清楚。那是因为没有设置viewport,也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏、状态栏、滚动条等等之后可查看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
viewport设置其实很简单,就一个meta
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
content中参数意思
width // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height // viewport 的高度 (范围从223 到10,000)
initial-scale // 初始的缩放比例 (范围从>0 到10)
minimum-scale // 允许用户缩放到的最小比例
maximum-scale // 允许用户缩放到的最大比例
user-scalable // 用户是否可以手动缩 (no,yes)
在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页,然后用viewport 查看其中的一部分。当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。
2.在移动设备中我们网页中的数字会自动识别为电话号码,解决办法也只要设置一个meta就ok,如下:
<meta content="telephone=no" name="format-detection" />
3.事件使用
在webapp开发中它包含以下三类触摸事件:
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel //当系统停止跟踪触发,关于此类事件的确切触发时间,文档中没有明确说明
// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend //离开时触发
// 屏幕旋转事件
onorientationchange
每个触摸事件都包括了三个触摸列表:
touches:当前位于屏幕上的所有手指的一个列表。
targetTouches:位于当前DOM元素上的手指的一个列表。
changedTouches:涉及当前事件的手指的一个列表。
每个触摸对象包含了以下触摸信息:
clientX / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID
target: //DOM元素,是动作所针对的目标。
分享到:
相关推荐
WebApp开发要点 ,Webapp开发的特点等
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
程序开发软件:MyEclipse8.5以上 数据库:mysql api接口采用技术: SSM框架(SpringMVC + Spring + Mybatis)客户端开发工具:微信开发者工具基于微信小程序图书管理app技术要点:1 此系统web端接口采用java语言和...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
【技术要点】 ListView+CheckBox Fragment+ViewPager Sqlite Service BroadcastReceiver ContentProvider Activity 在Android Studio中,用WebView接口实现软件界面(AVD模拟器)显示html页面; 用Android Studio中...
基于Vue图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现,可以升级Springboot 2 客户端和服务器通信采用axios组件,格式采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于...
基于微信小程序图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现 2 客户端和服务器通信数据,采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词查询图书的功能 基于微信小...
基于Vue图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现,可以升级Springboot 2 客户端和服务器通信采用axios组件,格式采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词...
此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 ...
基于Vue图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现,可以升级Springboot 2 客户端和服务器通信采用axios组件,格式采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词...
Web安全技术点.jpg Web服务器入侵防御.jpg Web攻击及防御技术.png XSS利用架构图.jpg XSS攻击点汇总.png nmap.jpg pentest_method.jpg powershell语法.png web渗透.jpg web应用测试.jpg xml安全汇总.png ...