web移动端一些常用知识

1.去掉 a，input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影)

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

2.禁止长按 a，img 标签长按出现菜单栏

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

3.省略号

//css单行
.test{
    width:300px;
    overflow: hidden;
    text-overflow:ellipsis;  /* 当字符串超过规定长度，显示省略符*/
    white-space: nowrap;
}

//多行,不用上js,使用-webkit的私有属性,-webkit-line-clamp:值number,为有几行
.test{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

4.swiper插件(当屏幕旋转或变化时,重新计算位移)

observer:true,
observeParents:true,  将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
swiper.update(true);        //重新计算Wrapper的位移

5.移动端字体

ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

//使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别
各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
body{font-family:Helvetica;}

6.CSS3 @font-face  自己定义的Web字体嵌入到你的网页中

在线转化字体: //https://www.fontsquirrel.com/tools/webfont-generator

@font-face {
    font-family: ‘SingleMaltaRegular‘;              /* name */
    src: url(‘../fonts/singlemalta-webfont.eot‘);       /* IE9 Compat Modes */
    src: url(‘../fonts/singlemalta-webfont.eot?#iefix‘) format(‘embedded-opentype‘),    /* IE6-IE8 */
       url(‘../fonts/singlemalta-webfont.woff‘) format(‘woff‘),     /* Modern Browsers */
    url(‘../fonts/singlemalta-webfont.ttf‘) format(‘truetype‘),     /* Safari, Android, iOS */
    url(‘../fonts/singlemalta-webfont.svg#SingleMaltaRegular‘) format(‘svg‘);   /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
//调用
body{font-family: ‘SingleMaltaRegular‘;}

7.移动端click屏幕产生200-300 ms的延迟响应(可使用touch事件)

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作.
所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。
那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

8.伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

//webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

9.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

10.模拟按钮hover效果,激活移动端css的active效果

.btn-blue:active{background-color: #357AE8;}

兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名

11.屏幕旋转的事件和样式

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
        alert(‘竖屏状态！‘);
    }
    if (window.orientation === 90 || window.orientation === -90 ){
        alert(‘横屏状态！‘);
    }
}, false);

/移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

/*css横屏提醒*/
#transverse {position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8) url(/images/transvers.png) no-repeat center center;background-size:50% auto;}
@media all and (orientation : landscape) {
    #transverse { display:block; }
}
@media all and (orientation : portrait){
    #transverse { display:none; }
}

12.audio元素和video元素在ios和andriod中无法自动播放

$(‘html‘).one(‘touchstart‘,function(){
    audio.play()
})

<!--
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏，ios7+、winphone8+支持，部分android4+支持（含华为、小米、魅族）
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

13.消除transition闪屏

.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}

14.取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

15.android 2.3 bug

@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
after和before伪类无法使用动画animation
border-radius不支持%单位
translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

16.android 4.x bug

三星 Galaxy S4中自带浏览器不支持border-radius缩写
同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
android无法同时播放多音频audio

17.Android 4.2.x 背景色溢出

//需要是使用background-clip: padding-box;来修复
.test{
    background-clip: padding-box;
}

18.border-radius兼容写法

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

19.如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

20.滑屏框架(适合上下滑屏、左右滑屏等滑屏切换页面的效果)

slip.js    https://github.com/peunzhang/slip.js
iSlider.js  https://github.com/peunzhang/iSlider
fullpage.js  https://github.com/peunzhang/fullpage
swiper.js  http://www.swiper.com.cn/

21.iscroll.js

解决页面不支持弹性滚动，不支持fixed引起的问题~
实现下拉刷新，滑屏，缩放等功能~
最新版本已经更新到5.0
官网：http://cubiq.org/iscroll-5

22.解决IOS fixed定位问题(有小瑕疵是会滚动到底部),中间是absolute布局

function onTouchMove(e) {
    e.preventDefault();
    e.stopPropagation();
};
function onFocus(e) {
    this.main.style.position = ‘absolute‘;
    if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
        inputMessageBox.style.position = "absolute";
        $HTML.animate({scrollTop:viewHeight});　　　　//中间内容的高度
    };
    document.body.addEventListener(‘touchmove‘, onTouchMove, false);
}
function onBlur(e) {
    this.main.style.position = ‘fixed‘;
    document.body.removeEventListener(‘touchmove‘, onTouchMove);
}

23.禁止复制、选中文本

Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

24.使用遮罩层在一些浏览器顶部自带搜索框时,向下滑动会快速出现一片空白

.mask{
    position:fixed;
    width:100%;
    height:200%;        //高度给高点
    left:0;
    right:0;
    top:0;
    bottom;
    opacity:1
    background-color:#111;
}
这样在一些浏览器顶部自带搜索框时,向下滑动会快速出现一片空白(浏览器顶部自带搜索框的高度)
所有宽高给高点可以解决这些bug

25.meta标签

1.<meta name="apple-mobile-web-app-capable" content="yes">
如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性：
iOS 2.1 +

2.<meta name="apple-mobile-web-app-status-bar-style" content="blank">
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
设置Web App的状态栏（屏幕顶部栏）的样式
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。

启动或禁用自动识别页面中的电话号码。
3.<meta name="format-detection" content="telephone=no">
4.<meta name="format-detection" content="email=no">

禁止浏览器放大字体
15.<meta name="wap-font-scale" content="no">

UC浏览器私有属性
//设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
//设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
//缩放不出滚动条，设置为yes后不出现横向滚动条。
<meta name="viewport" content="uc-fitscreen=no|yes"/>
//夜间模式disable为禁用夜间模式
<meta name="nightmode" content="enable|disable"/>
//禁用UC浏览器的无图模式
<meta name="imagemode" content="force"/>
//app模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="browsermode" content="application"/>

QQ浏览器私有属性
//设置屏幕方向为横屏还是竖屏
<meta name="x5-orientation" content="portrait|landscape" />
//设置是否全屏，yes表示强制浏览器全屏
<meta name="x5-fullscreen" content="true" />
//app模式
<meta name="x5-page-mode" content="app" />

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

添加到主屏（苹果 IOS Safari）
<!-- 启用 WebApp 应用全屏模式，这个只会在你保存为桌面应用后从中打开才会全屏，在浏览器中不会全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--保存某个页面到桌面的时候的应用标题-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--保存某个页面到桌面的时候使用这张图作为桌面图标，尺寸和iphone上的一致，是57*57px-->
<link rel="apple-touch-icon" href="custom_icon.png">
<!--启动图，只使用一张114*114的图片即可-->
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

避免百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

13.data URI scheme是在RFC2397中定义的

data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。如
background:#f0f5f9 url(data:image/png;base64,iVBORw0KGgoAAAANS...SuQmCC) no-repeat 50% 50%
时间： 2024-11-08 22:01:24

web移动端一些常用知识的相关文章

【转】web移动端一些常用知识

1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a.input和button点击时的蓝色外边框和灰色半透明背景*/ } 2.禁止长按 a,img 标签长按出现菜单栏 a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ } 3.省略号

Web移动端的常用组件库

normalize http://necolas.github.io/normalize.css/ 最受欢迎的css reset 保留有用的默认值,这个区别于其他的CSS resets 标准化大范围的HTML elements的样式纠正bugs,使浏览器具体通用性 通过一些巧妙的改进来增强可用性 用具体的说明来讲解代码的用处 topcoat http://topcoat.io/topcoat/ 一套非常精致的UI元素类库,提供了常用了基础组件 Bootstrap http://getbootst

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

Linux运维常用知识（4）

linux命令无效-bash: ls: command not found 一次重启后开机,基本所有的命令都不可用,只有少数的命令可用 [[email protected] ~]# ll -bash: ls: command not found [[email protected] ~]# pwd /root [[email protected] ~]# shutdown -r now -bash: shutdown: command not found [[email protected] ~

端游及手游服务端的常用架构

这篇文章还是讲的不错的: http://www.cocoachina.com/game/20150924/13545.html <开发者详解:端游及手游服务端的常用架构> 整理自知乎,文/韦易笑 开始的部分讲的比较简略.讲到后面大型MMO以及战网游戏,就比较入流了. 开宗明义,手游页游和端游的服务端本质上没区别,区别的是游戏类型. 类型1:卡牌.跑酷等弱交互服务端 卡牌跑酷类因为交互弱,玩家和玩家之间不需要实时面对面PK,打一下对方的离线数据,计算下排行榜,买卖下道具即可,所以实现往往使用简单

移动端尺寸基础知识

转:http://www.cnblogs.com/chris-oil/p/5367106.html 移动端尺寸基础知识 初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪.我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家.从原理说起,理清关于尺寸的所有细节.由于是写给初学者的,所以不要嫌我啰嗦. 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重.尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x9

SeaJS：一个适用于 Web 浏览器端的模块加载器

什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范.SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个. 为什么用SeaJS?假如我们要开发一个web应用App,在这个应用中需要使用jquery框架.App的首页index.html会用到module1.js,module1.js依赖module2

必知干货：Web前端应用十种常用技术你全都知道吗？

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔

HTML5常用知识

今日做项目,涉及到native和H5页面的交互 1.document.readyState document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. 1-LOADING:加载程序进行中,但文件尚未开始解析. 2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效. 3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有