手机移动端WEB资源整合学习整理

最新推荐文章于 2018-09-18 17:43:14 发布

sma2mmm

最新推荐文章于 2018-09-18 17:43:14 发布

阅读量474

点赞数

分类专栏：技术使用文章标签：移动

本文链接：https://blog.csdn.net/sma2mmm/article/details/53389867

版权

技术使用专栏收录该内容

31 篇文章 0 订阅

订阅专栏

学习链接

meta

<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

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

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 可选default、black、black-translucent -->

点击延迟解决

移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序
ontouchstart
ontouchmove
ontouchend
onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

**IE10（winphone8）表单元素默认外观如何重置** **禁用 select 默认下拉箭头** ::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。 select::-ms-expand { display: none; } **禁用 radio 和 checkbox 默认样式** ::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。 input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display: none; } **禁用PC端表单输入框默认清除按钮** 当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。 input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none; } **禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片** .css{-webkit-touch-callout: none} 禁止ios和android用户选中文字 .css{-webkit-user-select:none} **常用的移动端框架** zepto.js 语法与jquery几乎一样，会jquery基本会zepto~ 最新版本已经更新到1.16 官网：http://zeptojs.com/ 中文(非官网)：http://www.css88.com/doc/zeptojs_api/ 常使用的扩展模块：浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ 最新版本已经更新到5.0 官网：http://cubiq.org/iscroll-5 underscore.js 笔者没用过，不过听说好用，推荐给大家~ 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。最新版本已经更新到1.8.2 官网：http://underscorejs.org/ 滑屏框架适合上下滑屏、左右滑屏等滑屏切换页面的效果 slip.js iSlider.js fullpage.js flex布局 flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~ /* ============================================================ flex：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-center：子元素垂直居中 flex-pack-center：子元素水平居中 flex-pack-justify：子元素两端对齐兼容性：ios 4+、android 2.3+、winphone8+ ============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

示例：两端对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">

/* ============================================================ flex：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-center：子元素垂直居中 flex-pack-center：子元素水平居中 flex-pack-justify：子元素两端对齐兼容性：ios 4+、android 2.3+、winphone8+ ============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>
<div class="flex flex-pack-justify">
<div>模块一</div>
<div>模块二</div>
<div>模块三</div>
<div>模块四</div>
</div>

</body>
</html>

使用注意：flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效

sma2mmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机移动端WEB资源整合学习整理

学习链接meta<meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta co
复制链接

扫一扫

专栏目录