关键词:
一、meta标签使用
1、meta的使用
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览
2、winphone系统
a、input标签被点击时产生的半透明灰色背景怎么去掉:
<meta name="msapplication-tap-highlight" content="no">
3、忽略页面的数字为电话
忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
4、下面的meta标签
是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
<meta content="yes" name="apple-mobile-web-app-capable">
5、下面的meta标签
也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
<meta content="black" name="apple-mobile-web-app-status-bar-style">
二、自适应布局模式
在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。
为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
1.布局使用百分比:
不同的手机有着不同的分辨率,这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素,因为子元素的百分比高度是根据父元素的高度来确定的,当父元素的高度为不确定值时,或者说父元素的高度未定义时,子元素的高度百分比将没有用(没有参照物)。所以只有设置了父元素的高度,子元素的高度百分比才会有用。
2.em与rem:
em是根据相对单位,不是固定的,他会继承父级元素的字体大小,若没有父级则em的相对基准点为浏览器的字体大小,浏览器的字体默认为16px,因此若无父级元素,相对于浏览器大小:Xem=X*16px;
rem是css3新增属性,是完全相对于HTML根元素大小设定的,默认为10px,因此无论父级字体大小,1rem=10px。
3.栅格布局:
box-sizing:border-box;
可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
4、wap页面有img标签
记得加上display:block
;属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
5、有关Flexbox弹性盒子布局一些属性
1、不定宽高的水平垂直居中
.xxx
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
2、[flexbox版]
不定宽高的水平垂直居中
.xx
justify-content:center;//子元素水平居中,
align-items:center;//子元素垂直居中;
display:-webkit-flex;
三、针对适配等比缩放的方法:
@media only screen and (min-width: 1024px)
bodyzoom:3.2;
@media only screen and (min-width: 768px) and (max-width: 1023px)
bodyzoom:2.4;
或如:
@media all and (orientation : landscape)
h2color:red;/横屏时字体红色/
@media all and (orientation : portrait)
h2color:green;/竖屏时字体绿色/
四、学会使用webkit-box
如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。
详情参考
查看此处
五、文本的处理
1、关闭iOS键盘首字母自动大写
2、//单行文本溢出
.xx
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
3、//多行文本溢出
.xx
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
4、解决 iPhone 横屏时默认会放大文字的问题
html
-webkit-text-size-adjust: 100%;
<meta name="viewport" content="width=device-width,initial-scale=1"/>
六、如何去除Android平台中对邮箱地址的识别
七、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果:
setTimeout(scrollTo,0,0,0);
请注意,这句代码必须放在window.onload
里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
八、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!
至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange
事件,那Android呢?
对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange
事件,但是在Android平台,确实也是阻止不了的。
图片、媒体的处理
1、//使用流体图片
img
width:100%;
height:auto;
width:auto\\9;
2、audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播
$(‘html’).one(‘touchstart’,function()
audio.play()
)
3、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
img
-webkit-touch-callout: none;
PS:需要注意的是,该方法只在 iOS 上有效。
九、阴影的处理
1、 移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input,textarea
border: 0;
-webkit-appearance: none;
十、字体的处理
对于网站字体设置
1、移动端项目:
font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,sans-self;
2、移动和pc端项目:
font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,“Hiragino Sans GB”,Simsun,sans-self;
3、字体大小尽量使用pt或者em,rem,代替px。
4、设置input里面placeholder字体的大小
::-webkit-input-placeholder font-size:10pt;
5、解决字体在移动端比例缩小后出现锯齿的问题
-webkit-font-smoothing: antialiased;
十一、圆角设置
放一个图片或者一个按钮,设置圆角会比较美观,设置圆角的值可以用百分比,也可以用em等单位。
element
border: 1px solid #ccc;
-moz-border-radius: 百分比;
-webkit-border-radius: 百分比;
border-radius: 百分比;
十二、边距凹陷
1、像素边框(例子:移动端列表的下边框)
.list-iteam:after
position: absolute;
left: 0px;
right: 0px;
content: ‘’;
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
2、边距塌陷
与在pc端开发一样,开发过程中需要的一个很需要注意的问题的边距塌陷,典型的问题是margin-top的嵌套,对子元素设置margin-top值,子元素相对于父元素的位置没有变,而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记,解决方案:
1.给父元素div1设置一个padding值
.div1
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
2.给父元素div1设置一个overflow:hidden
;在不加overflow:Hidden
;的时候,margin-top:这个属性是认不到边的,也就是失效。
但是ie浏览器解决了这个问题,火狐、谷歌之类的就会出现失效,所以这是个标准问题,也是个兼容问题。
.div1
height: 500px;
width: 100%;
background: #ccc;
overflow: hidden;
十三、禁止内容
1、//禁止文本缩放
html
-webkit-text-size-adjust: 100%;
2、移动端禁止选中内容
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
.user-select-none
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
兼容IE6-9的写法:onselectstart=“return false;”
unselectable=“on”
十四、滚动效果
十五、快速回弹
快速回弹滚动
.xxx
overflow: auto;
-webkit-overflow-scrolling: touch;
PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,:官方地址
十六、白色背景颜色搭配
十七、常用的移动端开发框架以及工具
移动端基础框架
- zepto.js 语法与jquery几乎一样,会jquery基本会zepto~
- iscroll.js 解决页面不支持弹性滚动,不支持fixed引起的问题~ 实现下拉刷新,滑屏,缩放等功能~
- underscore.js 该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
- fastclick 加快移动端点击响应时间
- animate.css CSS3动画效果库
- Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
滑屏框架 -适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper
瀑布流框架 masonry
工具推荐
- caniuse 各浏览器支持html5属性查询
- paletton 调色搭配
十八、动画的处理
- 开启硬件加速
- 解决页面闪白
- 保证动画流畅
.css
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
设计高性能CSS3动画的几个要素
- 尽可能地使用合成属性
transform
和opacity
来设计CSS3动画, - 不使用
position
的left和top来定位 - 利用
translate
3D开启GPU加速
十九、消除闪烁
消除transition闪屏
.css
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
二十、移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止:
.xxx
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
二十一、如何解决盒子边框溢出
当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。
在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;
用来指定该盒子的大小,包括边框的宽度
二十二、如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width
,如果没有请立即加上吧!
前端面试题,移动端兼容问题都有哪些,安卓和ios问题?
...移动设备以安卓和IOS为主,我们在制作移动端页面也是以兼容这两种设备去布局。首先说iPhone,不得不说iPhone的屏幕考虑到了我们开发者的难处,从而给出iPhone屏幕的dpr都是整数值,在6plus出现之前,iphone的dpr始终是2(物理像素... 查看详情
移动端bug兼容(代码片段)
总结一下目前的移动端开发遇到的问题。1、IOS与安卓input默认样式去除。移动端总有一个默认的圆角或别的。input[type=button],input[type=text],input[type=password]-webkit-appearance:none;outline:none;border-radius:none;2、IOS后退无刷新使用onpageshow主动... 查看详情
移动端
...谷歌,iOS内置safari浏览器,他们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和iOS的区别 2,布局 设备宽度···设备的实际大小,设备的分辨率···厂家给的 页面的大小&midd... 查看详情
移动端入门
...谷歌,iOS内置Safari浏览器,它们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和iOS的区别; 2.布局 设备宽度:设备的实际大小设备的分辨率厂家给的 页面的大小:设计稿上的大小 浏览器的视口:浏... 查看详情
flexible.js移动端适配安卓高分辨不兼容问题
根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dprif(!dpr&&!scale){if(isIPhone){//iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&a 查看详情
移动端布局(代码片段)
...iOS内置Safari浏览器他们的内核是webkit, 不考虑兼容性,需要考虑的是安卓和iOS的区别 2.布局 设备宽度:设备的实际大小,设备的分辨率---厂家给的 页面的大小··设计稿上的大小 浏览器的视口... 查看详情
移动端布局
...览器是谷歌ios内置safari浏览器他们的内核都是web,不考虑兼容性,需要考虑的问题是安卓和ios的区别问题2.布局(写页面)要考虑以下几点设置的宽度设备的实际大小(设备的分辨率)厂家给的页面的大小设计稿上的大小浏览器的... 查看详情
html5技术教程移动端经常出现的兼容问题
移动端经常出现的兼容问题1.安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRadio比较乱,有1.5的,有2的也有3的。想让图片在手机里显示更为清晰,必... 查看详情
pc端网页和移动端网页,自己做的总结
1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的... 查看详情
javascript小游戏--2048(移动端)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触... 查看详情
移动端web开发初探之vuejs的简单实战
...,因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。在这过程中遇到了不少有意思的东西。DEMO的github地址在这里内容提要:meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探meta标签这点与在PC... 查看详情
0075移动开发选择和技术解决方案:单独响应式normalize.cssborder-box移动端特殊样式
...动端适配的一套网站。京东pc端、移动端:2.响应式页面兼容移动端(其次)响应式网站:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配。4.2 查看详情
移动端图片文字垂直居中实现方法
...果:或者。 在开发过程中,可能我本身代码原因或者兼容原因,在ios和安卓端很难完全实现这样的居中效果。 为了实现这样的写法,同时兼容ios与安卓端,我采用了以下三种方法来实现(以下代码我只写主要的属性,具... 查看详情
移动端开发模式
native开发 ios和安卓webapp俗称webwiew 相当于在手机上的浏览器访问线上的app 所有资源都在服务器上 操作底层(相机 视频)需要和ios‘ 安卓连桥(配合合作来)hybridAPP在打包的时候嵌套ios和安卓的... 查看详情
html移动端开发常见的兼容性总结
1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以... 查看详情
移动端兼容
移动端前端开发注意点第一次接触移动端开发,发现web端和移动端的差别还是很大的,我主要记录移动端的一些内容:移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web... 查看详情
前端里移动端到底比pc端多哪些知识?
...到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别:(1)PC考虑的是浏览器兼容性,移动端开发考虑的更多... 查看详情
移动端开发模式1
native开发 ios和安卓webapp俗称webwiew 相当于在手机上的浏览器访问线上的app 所有资源都在服务器上 操作底层(相机 视频)需要和ios‘ 安卓连桥(配合合作来)hybridAPP在打包的时候嵌套ios和安卓的... 查看详情