- 浏览: 66641 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,需要对HTML5和CSS3有一定的了解。
1.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。
以lz的这句为例,其中的元信息分别是:
http类型:这个网页是表现内容用的
content(内容类型):这个网页的格式是文本的
charset(编码):这个网页的编码是utf-8,需要注意的是这个是网页内容的编码,而不是文件本身的。
编码不用说,content常见的还有xml等类型。META,网页Html语言里Head区重要标签之一
HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的HTTP-
EQUIV类型有:
1、Content-Type和Content-Language (显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
该META标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码。如果将其中的“charset=GB2312”换成“BIG5”,则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时,IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集,则IE就提示下载。其他的语言也对应不同的charset,比如日文的字符集是“iso-2022-jp ”,韩文的是“ks_c_5601”。
Content-Type的Content还可以是:text/xml等文档类型;
Charset选项:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;
Content-Language的Content还可以是:EN、FR等语言代码。
2、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
(2)<meta content="yes" name="apple-mobile-web-app-capable" />
(3)<meta content="black" name="apple-mobile-web-app-status-bar-style" />
(4)<meta content="telephone=no" name="format-detection" />
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
3、如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中
<meta content="email=no" name="format-detection" />
4、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
5、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!
至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。
6、如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphone\ipod\ipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事!
7、如何关闭iOS中键盘自动大写
我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
1.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。
以lz的这句为例,其中的元信息分别是:
http类型:这个网页是表现内容用的
content(内容类型):这个网页的格式是文本的
charset(编码):这个网页的编码是utf-8,需要注意的是这个是网页内容的编码,而不是文件本身的。
编码不用说,content常见的还有xml等类型。META,网页Html语言里Head区重要标签之一
HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的HTTP-
EQUIV类型有:
1、Content-Type和Content-Language (显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
该META标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码。如果将其中的“charset=GB2312”换成“BIG5”,则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时,IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集,则IE就提示下载。其他的语言也对应不同的charset,比如日文的字符集是“iso-2022-jp ”,韩文的是“ks_c_5601”。
Content-Type的Content还可以是:text/xml等文档类型;
Charset选项:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;
Content-Language的Content还可以是:EN、FR等语言代码。
2、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
(2)<meta content="yes" name="apple-mobile-web-app-capable" />
(3)<meta content="black" name="apple-mobile-web-app-status-bar-style" />
(4)<meta content="telephone=no" name="format-detection" />
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
3、如何去除Android平台中对邮箱地址的识别
看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中
<meta content="email=no" name="format-detection" />
4、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
5、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!
至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。
6、如何检测用户是通过主屏启动你的webapp
看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphone\ipod\ipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事!
7、如何关闭iOS中键盘自动大写
我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
发表评论
-
Jasper报表工具经验总结
2020-07-16 12:58 01、JasperFillManager.fillReport执 ... -
在BootStrap的modal中使用Select2
2019-03-08 21:29 591在普通页面中使用Select2是正常的,但是在Modal中使用 ... -
固定table表头
2016-06-21 09:11 625<!doctype html public " ... -
获得浏览器版本信息
2016-06-16 10:36 583<script type="text/java ... -
用于获取系统版本
2016-06-15 18:06 614<script type="text/java ... -
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2016-05-31 17:04 1431td 内容自动换行 table表格td设置宽度后文字太多自动换 ... -
java session时间的控制
2015-12-15 16:46 759session对象用于在会话范 ... -
Unsupported major.minor version 51.0解决办法
2015-05-08 12:57 858解决方法:打开exclipse中项目上的属性—java co ... -
base64加密解密
2015-05-08 12:21 987package test; import su ... -
更改SYBASE默认字符集为CP936
2015-04-18 11:46 1623更改SYBASE默认字符集为CP936 注意:更改字 ... -
JTDS和JDBC连接Sybase数据库
2015-04-17 19:09 1911JTDS是一个开放源代码的100%纯Java的,用于JDBC ... -
Jdbc方式连接Sybase数据库入门
2015-04-17 19:05 2424public class JdbcConnSybase { ... -
JDBC链接数据库(转载)
2015-04-17 19:02 6211、链接Sqlserver2000 驱动类 com.micr ... -
proxool连接池介绍
2015-04-14 14:12 674继前两文介绍了dbcp、c3p0的使用,本文准备再介绍另一个连 ... -
c3p0配置介绍
2015-04-14 14:11 709继上一篇介绍dbcp的配置 ... -
apache-DBCP基本配置介绍
2015-04-14 14:10 546apache-DBCP基本配置介绍 ... -
proxool连接池配置详细说明(转)
2015-04-14 08:33 1521目前市面上三个主流连接池从性能上排名如下:proxool> ... -
My eclipse快捷键
2015-02-25 10:41 6831、一般设置工作空间的编码为UTF-8 2、快捷键的配置 ... -
jsp页面返回上一页的方法
2014-11-05 10:50 1953jsp页面返回上一页的方法 1. <a hre ... -
收集几个Java Web开发的网站
2014-03-13 17:12 880Zepto中文手册 http://www.html-5.cn/ ...
相关推荐
用于移动网页的轻量级,可扩展的前端开发人员工具。 产品特点 查看控制台日志 查看网络请求 查看文件元素 查看Cookies,LocalStorage和SessionStorage 手动执行JS命令 自定义插件 用法 下载。 (请勿在dev分支中...
1.复合选择器 (1)后代选择器(包含选择器 重要) 语法: 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性:属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代(元素2)的样式 ...
光滑的 用于快速移动和桌面网站开发的小型且可定制的响应式前端框架。 警告我正在测试更新此项目。 非生产用 2014-12-13 Smooth 开箱即用,具有任何 RWD 框架的基础:网格、弹性盒、表单……但有一些有趣的特性: ...
1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法...
通过uni.request()请求数据并显示,以及不同页面间参数的传递
这个小小的源码包集合了100位开发者的经验,你可以将这些经验运用在你的项目中。 Google统计、图标 和 更多 压缩包内包含了 一个干净、移动终端友好的HTML模版;优化过的Google统计代码;... 标签:前端模版
uniapp前端单文件上传JAVA后台接收实现(亲测),看了些文档,亲测了一天,后面还有多页面上传文档代码上传哦
开放:基于dotNET core,完全响应跨平台开源架构,配合微软件的全产业链生产线,从而具备从OS操作系统、数据库操作系统、开发工具、云计算、扩展或办公体系完整的生态支持(即开发商所提供的网站解决方案从源上支持...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
画布>入门3h <canvas> 标签位图上下文二维坐标在 <canvas> 中绘制高级绘图功能3h 绘制曲线不超过扭曲空间插入图片贮存3h 饼干客户端数据库开发工具前端开发工具3h 浏览器之间的样式协调CSS 框架:蓝图、引导程序、...
本资源是一个基于SpringBoot+Vue的高校食堂移动预的完整开发源码,包括前端、后端、数据库等部分。该系统主要提供自媒体社区服务,实现自媒体账号管理、内容发布、用户互动等功能,提高自媒体推广效率和用户体验。该...
丛书名: 移动开发系列丛书 平装: 818页 正文语种: 简体中文 开本: 16 ISBN: 9787115264305 条形码: 9787115264305 商品尺寸: 26 x 18.4 x 3.8 cm 商品重量: 1.3 Kg 编辑本段 内容简介 《Google Android SDK开发范例...
■基于FLex弹性布局重写前端(OA平台因要支持传统业务暂不涉及)。 ■提供全新的Bootstrap 4.0技术文档,并获得Bootstrap官方认同,访问http://code.z01.com/v4 ■前后端全面引入scss(sass)技术,与Bootstrap官方...
generator-lego 基于 gulp 的前端工作流 快速开始 提供以下2种获取方式: Clone the repo git clone git@github.com:duowan/generator-lego.git 在克隆目录执行 npm link 链接到全局模块的位置 在空目录执行 ...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
丛书名: 移动开发系列丛书 平装: 818页 正文语种: 简体中文 开本: 16 ISBN: 9787115264305 条形码: 9787115264305 商品尺寸: 26 x 18.4 x 3.8 cm 商品重量: 1.3 Kg 编辑本段 内容简介 《Google Android SDK开发范例...
* 前后端分离,前端启动器UI界面现代化、扁平化,提供参数调节功能并与后端通过json参数共享 * 设计演示模式,实时展现AI的识别过程 * 设计静态和动态模式,在敌人静态和近匀速运动时有可观的射击精准度 * 适配多款...