Giter VIP home page Giter VIP logo

h5's Introduction

H5资源整理

框架

  • fullPage.js 兼容桌面端(ie5.5+) 和 手机端
  • H5FullscreenPage.js 基于zepto全屏滚动
  • slip.js 移动端跟随手指滑动组件,零依赖
  • iSlider.js H5全屏滑动组件
  • zepto.fullpage.js 可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。
  • touch.js 百度移动设备上的手势识别与事件库
  • hammer.js 一个多点触控手势的JavaScript库
  • quo.js JavaScript手势库

CSS重置

动画库

加载动画

响应式工具

其他工具

study

meta

  • 页面窗口自动调整到设备宽度,并禁止用户缩放页面

      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
  • 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari(ios7.0版本以后,safari上已看不到效果)

      <meta content="yes" name="apple-mobile-web-app-capable">
    
  • 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)

      <meta content="black" name="apple-mobile-web-app-status-bar-style">
    
  • 忽略将页面中的数字识别为电话号码

      <meta content="telephone=no" name="format-detection">
    
  • 忽略Android平台中对邮箱地址的识别

      <meta content="email=no" name="format-detection">
    

click延迟问题

CSS相关

  • 禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

      -webkit-touch-callout: none;
    
  • 禁止ios和android用户选中文字

      -webkit-user-select:none;
    
  • 去掉被触摸时产生的半透明灰色遮罩

      -webkit-tap-highlight-color: transparent;
    
  • 字体清晰

      -webkit-font-smoothing: antialiased; 
    
  • 设置placeholder颜色

      input::-webkit-input-placeholder{color:#RED;}
      input:focus::-webkit-input-placeholder{color:#RED;}
    
  • 善用active属性: 点击时效果

  • 打电话

      <a href="tel:10086">10086</a>
    
  • 发短信

      <a href="sms:10086">短信:10086</a>
    
  • 发邮件

      <a href="mailto:[email protected]">电子邮箱:[email protected]</a>
    
  • 关注微信

      <a href="weixin://addfriend/kuaipao8-com">微信号:xxx</a>
    

h5's People

Contributors

imguoc avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.