·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]移动端html5开发一些经验整理

时间:2017-08-09 08:58web前端教程
[html5]移动端HTML5一些经验整理,web前端教程

[html5]移动端HTML5一些经验整理

首先,先说的是我每个项目都会用到的一个模板页,这个我遇到大大小小的坑之后定义好的一个html文件

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="utf-8" />   
  5.     <!-- 宽度设置为设备实际宽度,初始化倍数为1,最小倍数为1,最大倍数为1,用户缩放为否 -->   
  6.     <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />   
  7.     <!-- 删除默认的苹果工具栏和菜单栏 -->   
  8.     <meta name="apple-mobile-web-app-capable" content="yes" />   
  9.     <!-- 苹果手机顶部为黑色 -->   
  10.     <meta name="apple-mobile-web-status-bar-style" content="block" />   
  11.     <!-- 屏蔽浏览器自动识别数字为电话号码 -->   
  12.     <meta name="fromat-detecition" content="telephone=no" />   
  13.     <!-- base.css是所有项目都会用到的底层样式 -->   
  14.     <link rel="stylesheet" type="text/css" href="css/base.css" />   
  15.     <!-- content.css是每个项目所有页面都会用到的公共样式 -->   
  16.     <link rel="stylesheet" type="text/css" href="css/content.css" />   
  17.     <!-- main.css为每个页面或是模块用到的一个样式文件-->   
  18.     <link rel="stylesheet" type="text/css" href="css/main.css" />   
  19.     <title></title>   
  20.     <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>   
  21.     <!-- base.js为所有项目都会用到的js文件 -->   
  22.     <script type="text/javascript" src="lib/base.js"></script>   
  23. </head>   
  24. <body>   
  25. </body>   
  26. </html>   

上面的meta可以帮我避免了好都问题

遇到的问题:

1.苹果手机上面,input控件会有默认的样式

解决

  1. /*去掉苹果手机端web按钮默认样式,解决按钮默认圆角问题*/   
  2. input[type="button"]{-webkit-appearance:none; /*去除input默认样式*//*border-radius: 0px;*/}   

2.在点击a标签的时候,安卓的手机会有蓝色底,苹果的机子会有灰色底

解决

  1. /*屏蔽点击元素出现底色*/   
  2. a   
  3. {   
  4.     -webkit-tap-highlight-color:rgba(255,255,255,0);   
  5. }   

4.左图,右文字的结构实现

 

这种结构  

(1).第一次做的时候,左右两块都是用百分百,这样在不同的屏幕因为右边字体的原因会有布局混乱的情况,然后就用媒体查询写多了两个样式文件,不过还有一个就是在平板上面,同样的百分百,左边的图片太大,导致右边的文字之间的间距要很大才可以对齐,效果很不好

(2).第二次做的时候,就想到了一个方法,利用float脱离文档流的特性,给图片设置一个maxwidth,然在device-width*图片百分百=maxwidth时,将文字所在的div的float设置为none;且设置margin-left为图片的宽度+之间的间距。

(3).第三次做的时候,因为看了其他的一些轻APP在横屏的时候,图片大小依然一致,所以把图片宽度定死,给个max-width和min-width,用弹性布局 flex-box,这回就很简单的高度这个布局问题

5.在微信,UC打开页面会有缓存问题,导致有时候改动的小效果看不到

解决:这里试过用cache来不让其缓存,不过用完之后反而令他们不加载文件(至今还没成功使用过cache),最后在加载发送请求的时候文件后面添加多个随机数,这样才解决测试是缓存问题

6.在做手机页面的时候,很多时候会用到z-index这个属性,如果用到这个属性的时候再对对应元素设置的话,会比较容易乱。

解决:我设置了

 top0{z-index:9999};

top1{z-index:8888};

top2{z-index:7777};

top3{z-index:6666};

top4{z-index:5555};

这样,在每个页面中,对应得贴上上面样式就行了。

7.还有就是多列布局column,弹性布局flex-box

在不知道这两种布局的时候,以下布局对来来说是比较麻烦的,特别是三列的,并且中间那个还有左右边框,定义百分百的时候比较麻烦。

在知道多列布局column,弹性布局flex-box后 上面的问题很好解决,但是要记得column的子元素要给高度,不然有可能会布局混乱

还有个问题就是设置column-count为3的时候,在7个子元素的时候会是这样的

竖着排列,不符合正常的一个阅读习惯,最后还是改成了float来布局

8.em跟rem的区别

em是相对于父层

rem是相对于根元素

所以说,如果html{font-size:62.5%};的时候,

如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了

在parent元素设置1.5em的情况下,child用rem作为font-size的单位的话,那么就要设置1.5rem才等同上面的效果

9.backgrond-size,这个属性很好用

用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法,按需要选择使用

10.在iphone中,在手机改为横屏模式的时候,字体会默认变大

解决:

/*禁止IOS横屏的时候字体变大*/
-webkit-text-size-adjust: none;

11.在用到<div><img src="" /></div>这个结构的时候,就是用块级元素包住img的时候,会出现div高度大于img的情况,就是有点高度不知道怎么来的  解决:img{display:block;};

12.在用到media的时候,如果在<meta>有设置width=device-widht的话,media中在设置max-width min-width,这里不能用max-device-width 跟 min-device-height,不然会没效果

13.目前手机web还无法禁用手机横屏的情况下,如果你页面布局有问题的话,在横屏的时候会出现布局乱的情况

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!