webApp 之常见问题

1.禁止电话和邮箱

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!--禁止电话和email--><meta name="format-detection" content="telephone=no,email=no"/><title></title></head><body><p>1383838438</p>//如果是显示电话和email的话，可以使用下面的方式;<a href="tel:110">1383838438</a><a href="mailto:13888@qq.com">1383838438</a></body>
</html>

2.取消点击链接，或者按钮时有高亮显示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a{-webkit-tap-highlight-color: rgba(0,0,0,0) ;}</style></head><body><!--a  input button  点击时会有高亮显示，通过下面的属性设置为透明--><!---webkit-tap-highlight-color--><a href="http://www.baidu.com"></a></body>
</html>

3.解决圆角过圆问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /><meta name="format-detection" content="telephone=no,email=no"/><title></title><style type="text/css">input{width: 50px;height: 50px;border-radius:5px ;-webkit-appearance: none;}</style></head><body><input type="button"  value="按钮" /></body>
</html>

4. Font Boosting （有时字体会自动变大问题）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!--<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />--><title></title><style type="text/css">* {margin: 0;padding: 0;}p {font-size: 24px;/*height: 200px;*/max-height: 999999px;}</style>
</head>
<body>
<div><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p><p>Font Boosting</p>
</div>
<!--什么是Font BoostingFont Boosting是Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。Font Boosting 的计算规则伪代码如下：multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);if (originFontSize < 16) {computedFontSize = originFontSize * multiplier;}else if (16 <= originFontSize <= (32 * multiplier - 16)) {computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);}else if (originFontSize > (32 * multiplier - 16)) {computedFontSize = originFontSize;}originFontSize: 原始字体大小computedFontSize: 经过计算后的字体大小multiplier: 换算系数，值由以下几个值计算得到deviceScaleAdjustment: 当指定 viewport width=device-width 时此值为 1，否则值在 1.05 - 1.3 之间，有专门的计算规则textScalingSlider: 浏览器中手动指定的缩放比例，默认为 1systemFontScale: 系统字体大小，Android设备可以在「设备 - 显示 - 字体大小」处设置，默认为 1clusterWidth: 应用 Font Boosting 特性字体所在元素的宽度screenWidth: 设备独立像素（DIPs, Density-Independent Pixels），如 iPhone 5 为 320Font Boosting 仅在未限定尺寸的文本流中有效，给元素指定宽高，就可以避免 Font Boosting 被触发。但是文本内容不可能都指定宽高。不过还好，我们通过指定 max-height  就可以无副作用的禁掉 Font Boosting 特性。用类似 p { max-height: 999999px; } 的方式来处理
-->
</body>
</html>

webApp 之常见问题相关推荐

移动端web开发常见问题
Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题" ...
JEECG常见问题大全征集
大家还有什么问题,请跟帖,谢谢支持.. JEECG常见问题大全征集 1. jeecg没有数据库脚本问题 jeecg不需要数据库脚本,在数据库创建好数据库,项目配置好数据源链接,会自动建表,登录时候有初 ...
滴滴WebApp实践经验分享
黄轶,前端技术专家,现就职于滴滴出行公共FE团队,前端技术专家,<Vue.js权威指南>主要作者.计算机专业硕士,2012年毕业于北京科技大学,曾任职百度.擅长前端自动化.工程化,前端架构 ...
滴滴：WebApp实践经验总结
本文为滴滴公共FE团队在WebApp方向的一些实践经验总结,主要内容包括:WebApp首页技术架构.前端工程化在WebApp的实践.通用地图JS库的设计和实践. 统一登录SDK的设计.通用客户端JSB ...
移动 webApp 开发入门与进阶
移动 webApp 开发入门与进阶简介一.移动 Web 开发入门 1.像素 2.视口(viewport) 3.box-sizing 属性 4.图标字体 5.flex 布局 (1)flex 的基本概 ...
JEECG 新手常见问题大全，入门必读
大家还有什么问题,请跟帖,谢谢支持.. JEECG常见问题大全原文地址:http://t.cn/RvYsEF6 1. jeecg数据库脚本问题注意:jeecg3.5.2之前版本,不需要数据库脚本, ...
移动端web开发开发技巧和常见问题
常见问题 1.移动端如何定义字体font-family 三大手机系统的字体: ios 系统默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue ...
webApp开发经验总(一）
你选择webapp 都是为了在规定时间里快速完成,总结就是webapp 适合简单型.大数据分析及报表展示类的应用,这样就能体现出跨平台的有点,开发快捷方便.具体情况还是得根据实际情况分析进行技术选型. ...
一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源
前言之前写过一篇 2018开发最快的Webapp框架--BUI交互框架 ,如果你还没看过,可以简单看一下,主要介绍了BUI的基本功能,有多少控件,以及实现的思路,BUI 1.5版本以后变化很大,统一 ...
Hybrid开发原理分析和开发中常见问题
首先,我们先来罗列一下当前市面上,移动端的各种开发方法 1.Native App 纯原生的app开发模式,android(Java)或者ios(Swift,Oc) 优点: 有最好的性能,有最好的体验 ...

webApp 之常见问题

webApp 之常见问题相关推荐

最新文章

热门文章

webApp 之 常见问题

webApp 之 常见问题相关推荐

最新文章

热门文章

webApp 之常见问题

webApp 之常见问题相关推荐