移动端各种小技巧及优化体验

前端开发vscode 插件
前端开发谷歌常用插件
免开发前端插件

1.meta固定语句
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”>

width 属性控制设备的宽度,device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

当然具体的情况的时候,还是要根据自己需求的情况而定,你要禁用缩放功能,就添加maximum-scale=1.0 与 user-scalable=no。不准备禁用就不写。

忽略将页面中的数字识别为电话号码
<meta content=”telephone=no” name=”format-detection”>

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

2.点击某个超链接的元素,点击下去的时候,部分手机会出现黑色阴影覆盖,以及需求禁止系统默认菜单 和 禁止选中文本,解决方案:
a{-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;}

-webkit-tap-highlight-color: transparent; 点击超链接或可点击的元素时的高亮颜色,值可为 一种color 或者 透明transparent;
-webkit-touch-callout: none; 当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。(在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。)
-webkit-user-select: none; 禁止选中文本。

3.好用的@media
(自行百度,嘿嘿嘿)

4.移动端字体大小参考
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

5.包两层div似乎就能解决很多问题(←_←)讲真(严肃脸~)

6.当键盘弹出时,会压缩页面,解决方法:
给页面一个最小高度
var Hei = $(window).height();
$(“body”).css(“min-height”,Hei);

7.滚动标签(兼容性也不错,而且方便):
<marquee></marquee> 可用于滚动字幕,图片,表格。
这里放上该标签的详解的链接:http://www.360doc.com/content/14/1210/17/9060464_431831883.shtml

8.块级元素的排版中:
另一种代替float浮动的方法 ——> display:inline-block ,或许你会爱上这种办法~

9.图片垂直居中的问题:
①绝对定位
②给其容器设置display:table-cell;vertical-align:middle 。 需要垂直居中的元素设置vertical-align:middle 。
(本人也就会这两种方法,感觉够用了,另外还听说过可以通过css3中的transform来设置,自行度娘)
……

另外拓展,水平居中两种方法:1.text-align:center 适用于内联元素。 2.margin:auto 适用于块元素。

10.是不是很想要让移动端的按钮被按下时出现和PC端上一样被hover的效果:
利用伪类 :active 成就梦想~~

11.关于ios系统中input按钮自带的默认样式,你会发现好TM丑啊,和自己设定的颜色完全不同
-webkit-appearance:none; 此方法禁用了默认样式,更多样式请参考度娘~~~

当然FireFox的内核的话 -moz-appearance:none;

  1. input的check的坑
    当你用jquery的时候,是不是还在为attr()设置了input的checked的时候,有时候显示没法选中,主要的需求就是在全选,单选这两者之中,自己玩玩就知道了~~
    这时候就不能用attr()了,用prop()。 想怎么选中,想怎么取消选中,随便选,爽的一b!!!!

拓展: 属性值为true和false,如checked,selected,disabled属性,建议使用prop(), 其他的建议使用attr();

13.超级爽的布局方式 flex 弹性布局
display:flex;
display:-webkit-flex;
这布局不要太爽,想怎么布局怎么布局,真的是随心所欲的布局方式。
有了这个布局,想更换子元素的比例,排列顺序,居中方式(包括水平居中,垂直居中,两端对齐等等)…还有超级多!!!
具体可以参考一下某大神写的教程,这里放链接flex布局教程

  1. display:-webkit-box;差不多可以看作是兼容老版浏览器的flex布局,如果你在微信端中开发就不得不用它了!!!
    微信内置浏览器X5内核 == 移动端IE6 ;
    微信内置浏览器 ? display:-webkit-box : display:-webkit-flex;
    至于api 自己度娘吧,常用的水平垂直居中 -webkit-box-align:center; -webkit-box-pack:center;

15.css局部滚动属性: -webkit-overflow-scrolling:touch;
运用场景: 顾名思义~哈哈哈哈

16.替代css sprites雪碧图的新产物:iconfont;
兼容性超级好,因为通过设置@font-face来设置新的自定义字体,再通过icon-font上寻找或自己上传所需要的图标,然后下载过来,里面有demo,自己体验吧~

17.移动端动画:
千万别用jq或者zepto的animate,
另外动画的目标元素请用fixed或者absolute进行定位,动画的位移 别用 top,left,right,bottom这四种的变换来实现,
要用transform:translate3d(x,y,z)来实现。而且具体数值最好是数值化,用像素。。别用百分比,因为百分比在内部换算成长度的时候 动画会掉帧。

sublime插件前端开发环境
前端开发地图插件
web前端开发分页插件
» 本文来自:前端开发者 » 《移动端各种小技巧及优化体验》
» 本文链接地址:https://www.rokub.com/6354.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!