移动 Web 开发技巧

1.使用click会出现绑定点击区域闪一下的情况,解决:给该元素一个样式如下

-webkit-tap-highlight-color: rgba(0,0,0,0);

2.用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧?不过如果是一个div,然后设置height:200px;overflow:auto;的话,可以滚动但是完全没有那滑动效果,很郁闷吧.不过自从用了-webkit-overflow-scrolling: touch;样式后,就完全可以抛弃第三方类库了,把它加在body{}区域,所有的overflow需要滚动的都可以生效了。

body
{
    -webkit-overflow-scrolling: touch;
}
时间: 2024-10-03 22:15:28

移动 Web 开发技巧的相关文章

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,

移动 Web 开发技巧之(后续)

昨天的<移动 Web 开发技巧>的这篇文章,大家反响不错,因为这些问题在大家日常写移动端的页面时经常遇到的.所以那个文章还是超级实用的,那么我们今天继续来分享一下移动端的web开发技巧吧,希望对大家有所帮助. PS:不要让小伙伴第一次写移动端像下面这位一脸的蒙逼哈哈… … 第一.启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="apple-mobile-web-app-c

移动端的web开发技巧(二)之常见问题

[简介] 移动端得web开发技巧(一)之meta标签的使用,详情请看,上一篇文章的介绍. 移动web开发中常见的问题如下: [1. 移动端如何定义字体font-family] 三大手机系统的字体: ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字

Web开发技巧:使用自定义数据属性创建弹出窗口

在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证Web应用能够正常运行.一般而言,技巧无外乎是将额外的信息塞入事件处理程序或滥用rel属性或class属性以方便注入行为.感谢HTML规范引入了自定义数据属性,让不堪回首的往日一去不返. 所有的自定义数据属性都以data一前缀开头,HTML文档的验证器会在验证时忽略它.开发人员可以在任意元素中加入自定义数据属性,属性值可以是照片的元数据.经纬度坐标或者弹出窗口的尺寸.最棒的是

移动Web开发技巧

META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="apple-mobile-web-app-capable" content="yes" /

移动端web开发技巧

常见问题 1.移动端如何定义字体font-family 三大手机系统的字体: iOS 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 Android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 Winphone 系统 默认中文字体是Dengxian(方正等线体) 默认英文和数字字体是Segoe 无微软雅黑字体 各个手机系统有自己的默认字体,且都不

【转】移动端web开发技巧

原文:http://ljinkai.github.io/2015/06/06/mobile-web-skill/ META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="app

移动端web开发技巧 -- 转载

META相关 1. 添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) <meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-touch-fullscreen&q

移动web开发笔记

移动web开发笔记 移动web开发笔记 基础概念 像素单位 CSS pixels与device pixels CSS pixels PPIDPI devicePiexelRatio 文字大小控制 viewport 响应式布局 原则 实现方式 布局方案 百分比布局流体布局 弹性flexible布局 flex-box布局 图片处理 普通设置 响应式图片 媒体查询 HTML5 新表单类型 HTML5的新输入类型 CSS3 设备控制 设备交互 性能优化 参考: 移动web开发入门 移动端web开发技巧