IOS web app一些实用的属性设置
IOS对safari私有的属性很多,虽然很多不为人知但是却很实用。掌握好这些属性对web app和混合app的开发会很有帮助。
1.format-detection[telephone=no] 是否自动把电话号码转为链接
1
|
< meta name = "format-detection" content = "telephone=no" >
|
IOS针对HTML文档内的纯文字,会自动转换为电话号码链接,当点击时,会默认和系统的拨号相关联,但是开发者有时候并不想这样。
这时只要在head加上上面这段meta,就不会了。
2. viewport 控制应用屏幕属性
1
|
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
viewport是一个针对移动web的meta标签,它的主要属性如下:
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
为什么我们要设置width和height©因为移动终端的分辨率比常用的显示器要小,假如我们把一般的网站在safari打开,会发现整体布局和文字都缩小的显示在手机屏幕上,只有我们把浏览器宽度设置成和我们手机分辨率宽度一样,才是1:1的对应显示。所以一般我们开发web app,width=device-width 把宽度设置成和设备宽度一样。
至于 initial-scale、maximum-scale、minimum-scale 就是在出现了页面内容和设备分辨率不是1:1 对应的时候用的,我们都知道用户可以使用双指操作将safari页面放大或者缩小,user-scalable可以控制用户是否可以这么做。假如我们设置了 width=device-width,一般我们不再需要给用户缩放。特别针对混合型的web app,我们体验尽量向原生APP靠拢,不允许缩放是大部分应用的做法。
这里有个经验分享,之前我在使用jquery mobile 1.0.2 版本的时候,发现jqm初始化的时候会用javascript把user-scalable设置成true,所以那时候即使我加了meta标签,也没有作用,后来才发现是jqm搞的鬼。后来1.1.0版本没有这个问题,假如你设置了这个meta标签的属性发现不生效,可以检查一下是不是一些第3方框架对这些属性做了设置。
3.webkitTouchCallout 禁止原生弹出菜单
在IOS浏览器里面,假如用户长按a标签,都会出现默认的弹出菜单事件,例如:
CSS3 的webkitTouchCallout 属性可以控制这个原生行为是否被执行,只要加上这段CSS
1
|
body { -webkit-touch-callout: none ; }
|
javascript也是可以设置的:
1
|
document.documentElement.style.webkitTouchCallout = 'none' ;
|
上面都是设置在body全局上,当然如果你只想某些地方不执行这种行为,可以把CSS属性定义在对应的地方。
4.webkitUserSelect 禁止用户选中
如果用户长按web网页的文本内容,都会出现选中的行为,提供复制文字等功能。
和上面的属性一样,设置可以禁止这种默认行为。
CSS的方法
1
|
body { -webkit-user-select: none ; }
|
javascript方法
1
|
document.documentElement.style.webkitUserSelect = 'none' ;
|
转载于:https://www.cnblogs.com/human/p/3472598.html
IOS web app一些实用的属性设置相关推荐
- ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一 ...
- 在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示 接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...
- 5 meta tags for making your website into a iOS Web App
1. Click on the launch arrow in Safari 2. From the drop down menu select "Add to Home Screen&qu ...
- 五、Web App 基础可视组件属性(IVX 快速开发教程)
五.基础可视组件属性 在 iVX 中各个组件存在不同的属性,这些属性用于设置显示的样式或者是自身具备的特征等,通过更改这些属性可以极大的方便我们进行项目的创作. 大多数组件都拥有相同的属性,相同属性在 ...
- web app开发技巧总结
Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...
- Web APP开发技巧总结(转)
一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta h ...
- 超好:web app变革之rem
感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作. 注明出处格式:腾讯ISUX (https://isux.tencent.com/web-app-rem.htm ...
- App跳转到权限设置界面
iOS 10 App跳转到权限设置界面(iOS10之前就不各个记录了) NSURL *url = [NSURL URLWithString:UIApplicationOpenSettingsURLSt ...
- Flutter设置App的应用名字和应用logo图标的方法(android ios web)
在前面的几期给大家介绍了flutter的安装以及一些简单的配置,还运行了helloword 那么接下来就带领大家了解如何设置应用名称以及图标 Flutter设置App的应用名字和应用logo图标的方法 ...
最新文章
- 内联式css样式,直接写在现有的HTML标签中
- CentOs7安装tomcat
- 确认过眼神,这就是你要的路由库
- [SDOI2015]序列统计 (NTT)
- 非常流行的版本管理工具Tower for Mac
- RTMP 协议学习总结
- 惠普136nw打印机清零_HP打印机清零方法(冷复位恢复出厂设置)
- 移动端分享链接给微信好友
- 【可靠性评估】电力系统可靠性评估matlab仿真
- ubuntu 中下载openssh源码移植到 arm开发,出现you don't exist, go away问题的解决
- 用 RIME 定制输入法
- 对抗网络之PG-GAN,无条件下生成更真实的人脸图像
- 医咖会免费SPSS教程学习笔记—Cohen’s kappa系数
- MySQL里什么是主键_mysql主键是什么?
- Java版1-50内素数(质数)和
- HTMLday2旅途
- Modbus协议的数据模型和地址模型,Modbus寄存器40001,30001是什么意思?
- 如何用好MindManager中的时间轴模板
- PCB焊盘、过孔、走线、去耦技术
- 学习 Go 语言 1 — 基础语法