第123天:移动web开发中的常见问题
一、函数库 underscoreJS
_.template
:
<ol class="carousel-indicators"><!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"><!--渲染的HTML字符串--> </div>
/*取到模版当中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*转化成模版函数*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*传入数据 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我们只需要再加一个属性 /*把html字符串渲染在页面当中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml);
<!--点模版--> <script type="text/template" id="point_template"><%_.each(model,function(obj,i){%><li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li><%})%> </script> <!--图片模版--> <script type="text/template" id="image_template"><%_.each(model,function(obj,i){%><div class="item <%=(i==0?'active':'')%>"><% if(isMobile){ %><a href="#" class="m_imgBox"><img src="<%=obj.img%>" alt=""/></a><%} else {%><a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a><%}%></div><%})%> </script>
二、rem布局
准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。
手机端页面自适应解决方案—rem布局进阶版(附源码示例)
三、移动web开发中的常见问题
1、移动端如何定义字体font-family?
三大手机系统的字体:
- iOS 系统:
- 默认中文字体是
Heiti SC
- 默认英文字体是
Helvetica
- 默认数字字体是
HelveticaNeue
- 无微软雅黑字体
- 默认中文字体是
- Android 系统:
- 默认中文字体是
Droidsansfallback
- 默认英文和数字字体是
Droid Sans
- 无微软雅黑字体
- 默认中文字体是
- Winphone 系统:
- 默认中文字体是
Dengxian
(方正等线体) - 默认英文和数字字体是
Segoeod
- 无微软雅黑字体
- 默认中文字体是
各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用Helvetica
,三种系统都支持。
/* 移动端定义字体的代码 */ body{font-family:Helvetica; }
2、移动端字体单位font-size选择px还是rem?
对于只需要适配手机设备,使用
px
即可。对于需要适配各种移动设备,使用
rem
,例如只需要适配iPhone
和iPad
等分辨率差别比较挺大的设备。rem
配置参考:
html {font-size:10px} @media screen and (min-width:480px) 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) and (max-width:959px) {html {font-size: 25px} } @media screen and (min-width:960px) and (max-width:1079px) {html { font-size: 30px} } @media screen and (min-width:1080px) {html {font-size: 32px } }
4、移动端touch事件(区分webkit和winphone)有哪些?
当用户手指放在移动设备在屏幕上滑动会触发的touch事件:
- 以下支持webkit:
touchstart
——当手指触碰屏幕时候发生。不管当前有多少只手指。touchmove
——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event``preventDefault()
可以阻止默认情况的发生:阻止页面滚动。touchend
——当手指离开屏幕时触发。touchcancel
——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()
一个提示框,此时会触发该事件,这个事件比较少用。
- 以下支持winphone 8:
MSPointerDown
——当手指触碰屏幕时候发生。不管当前有多少只手指。MSPointerMove
——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css
的html{-ms-touch-action:none;}
可以阻止默认情况的发生:阻止页面滚动。MSPointerUp
——当手指离开屏幕时触发。
5、如何解决移动端click屏幕产生200-300ms的延迟响应问题?
移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。
解决方案:
fastclick
可以解决在手机上点击事件的300ms延迟。zepto
的touch
模块,tap
事件也是为了解决在click
的延迟问题。
触摸事件的响应顺序:
ontouchstart
ontouchmove
ontouchend
onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart
事件,加快对事件的响应。
6、 什么是Retina 显示屏,带来了什么问题?
retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina
显示屏中,像素点1个变为4个。
在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍。
那么,前端的应对方案是:
设计稿切出来的图片长宽保证为偶数,并使用backgroud-size
把图片缩小为原来的1/2。
//例如图片宽高为:200px*200px,那么写法如下 .css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px。
.css{font-size:20px}
7、移动端如何取消touch高亮效果?
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类:active
的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
ios
用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color
的alpha
值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
android
用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha
值为0去除部分机器自带的效果。
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; }
-webkit-user-modify
有个副作用,就是输入法不再能够输入多个字符。另外,有些机型去除不了,如小米2。对于此类问题还有个办法,不使用
a
或者input
标签,直接用div
标签。winphone
系统a
、input
标签被点击时产生的半透明灰色背景怎么去掉?
<meta name="msapplication-tap-highlight" content="no">
8、关于webkit表单的几个问题
webkit
表单元素的默认外观怎么重置?
.css{-webkit-appearance:none;}
webkit
表单输入框placeholder
的颜色值能改变么?
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEE}
webkit
表单输入框placeholder
的文字能换行么?
iOS可以,Android不行。
如何禁止文本缩放?
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html { -webkit-text-size-adjust: 100%; }
需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置
meta viewport
。
9、如何在移动端禁止用户选中内容?
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all (移动端不需要) */-ms-user-select: none; /* IE 10+ */ }
10、如何模拟按钮的hover效果?
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css
的hover
并不能满足我们的需求,还好国外有个激活css
的active
效果,代码如下:
<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"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body><div class="btn-blue">按钮</div><script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html> 兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法,可通过绑定ontouchstart
和ontouchend
来控制按钮的类名。
<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"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body><div class="btn-blue">按钮</div><script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){this.className = "btn-blue" } </script> </body> </html>
11、屏幕旋转的事件和样式
事件:
window.orientation
,取值:正负90表示横屏模式、0和180表现为竖屏模式。
window.onorientationchange = function(){switch(window.orientation){case -90:case 90:alert("横屏:" + window.orientation);case 0:case 180:alert("竖屏:" + window.orientation);break;} }
样式:
//竖屏时使用的样式 @media all and (orientation:portrait) {.css{} }//横屏时使用的样式 @media all and (orientation:landscape) {.css{} }
12、移动端常见的一些功能
摇一摇功能:
HTML5 deviceMotion
:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。手机拍照和上传图片:
<input type="file">的accept 属性 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
使用总结:
iOS
有拍照、录像、选取本地图片功能。- 部分
android
只有选取本地图片功能。 winphone
不支持。input
控件默认外观丑陋。
消除
transition
闪屏:
.css{/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/-webkit-transform-style: preserve-3d;/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/-webkit-backface-visibility: hidden; }
开启硬件加速:
- 解决页面闪白。
- 保证动画流畅。
.css {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
android
上去掉语音输入按钮:
input::-webkit-input-speech-button {display: none}
13、如何禁止百度转码?
<meta http-equiv="Cache-Control" content="no-siteapp" />
14、怎样默认优先使用最新版本IE和Chrome?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
转载于:https://www.cnblogs.com/le220/p/8092994.html
第123天:移动web开发中的常见问题相关推荐
- 【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录 课程名 备注 入门必学 nodejs入门到企业web开发中的应用 框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 谈谈WEB开发中的苦大难字符集问题
记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那个时候迫于项目进度大多都是知其然不知其所以然.后来有时间就把整个体系搞了个遍,终于摸通了来龙去脉. ...
- Web开发中的相对路径和绝对路径
在学习HTML的时候一定会遇到引入文件和链接跳转页面,比如:JS文件.CSS文件.Image图片.我们就会考虑是相对路径和绝对路径的问题.下面PHP程序员雷雪松就详细讲解下Web开发中的相对路径和绝对 ...
- web开发中目录路径问题的解决
web开发中目录路径问题的解决 参考文章: (1)web开发中目录路径问题的解决 (2)https://www.cnblogs.com/freeweb/p/4751403.html 备忘一下.
- java sessionstate_在Java Web开发中自定义Session
Session在存储安全性要求较高的会话信息方面是必不可少的,对于分布式Web应用自定义Session支持独立的状态服务器或集群是必须的.本文就来教大家如何在Java Web开发中自定义Session ...
- web开发中的缓存问题的研究(一)
web开发中的缓存问题的研究(一) web开发中的缓存问题的研究(二) web开发中的缓存问题的研究(三) 一般情况下,浏览器都会缓存已经访问过的页面内容,关于如何禁止浏览器缓存的介绍,在网上到处都有 ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- java web开发中Filter使用Annotation配置 (转载)
为什么80%的码农都做不了架构师?>>> 为了在java中得到request和response对象,搜索到了 <如何在Java的普通类中获取Session以及reques ...
最新文章
- srcache_nginx redis 构建缓存系统应用一例
- php validator,实用的PHP验证器类Validator
- 组件开发之ASP.NET中集成资源文件的服务器端控件开发
- Hashcat从入门到入土(二)
- js实现QQ、微信、新浪微博分享功能
- c html联调,JS与native 交互简单应用
- 使用jsp,tag提取字符串中的单词
- AndroidStudio_安卓原生开发_全局异常处理_并记录系统错误日志---Android原生开发工作笔记138
- C# 构造函数base()实例演示
- Android 滑动冲突问题的简单解决思路
- Java AtomicInteger类源码解析
- C++中的RECT类
- 魔改010Editor Template 识别伪加密
- HD-Map lanelet2(2)
- 叉乘点乘混合运算公式_小学数学所有公式和顺口溜都在这里了,考试肯定能用到!...
- 5、蓝桥杯之手机尾号评分
- java咖啡是研磨的吗_没想象的困难:咖啡研磨,明白只需要三步!
- 金庸群侠X版 会议纪要
- Yii2 中 checkboxlist 复选框 默认选中
- 一个简单的步骤让你的 Python 代码更干净
热门文章
- 决定好好研究一些开源的系统
- Postgre合并多行数据为一行
- Mysql的高可用方案及主从详细配置
- Rabbitmq java.util.concurrent.TimeoutException小问题解决
- 66319d电源使用说明书_电热水壶怎么使用?电热水壶烧不开水的问题是什么?
- python字典导入mongodb_python连接mongoDB进行数据提取→常用操作指南
- c++测试cpu_测评丨NXP系列 LS1028 LS1046等产品网络性能测试
- python小老鼠编程_成都python函数学习教程,Python编写课程
- python热部署_关于Spring Cloud 框架热部署的方法
- django配置在MySQL_怎么在Django中安装与配置mysql