成都web前端培训
成都达内金融街中心

18328393564

热门课程

前端开发-移动端代码

  • 时间:2016-05-24 09:44
  • 发布:成都达内
  • 来源:达内

前端开发-由于前端设备的不同我们的用户浏览到的页面的大小也是不同的,那么针对前端的开发人员来说,为了适应前端的这种响应式的发展,和用户的多元需求,我们将移动端的开发和pc(电脑)端的开发进行了区别定义和开发。那么针对移动端,我们需要注意的事项有哪些呢,下面进行详述。

移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点。

当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好。

所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的。

丰富的页面Meta

控制显示区域各种属性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

width                     – viewport的宽度

height                    – viewport的高度

initial-scale         –初始的缩放比例

minimum-scale –允许用户缩放到的最小比例

maximum-scale –允许用户缩放到的最大比例

user-scalable      –用户是否可以手动缩放

IOS中Safari允许全屏浏览:

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码:

<meta content="telephone=no" name="format-detection">

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

IOS中Safari设置保存到桌面图标:

这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

强大的CSS属性box-flex

之所以将这块作为大栏目来讲,是因为这个属性非常有用,和之前开发win8 app时的grid非常相似。

box-flex的作用是按百分比划分兄弟相同标签的width,也就是当ul里有个两个li时,每个li会自动划分ul的宽度,如果box-flex:1;那么此时,li的width就是50%

box-flex第一种用法实例:

<ul>

<li>11111</li>

<li>2222222</li>

<li>333333333</li>

</ul>

ul{display: -webkit-box;}

ul li{-webkit-box-flex: 1;}

显示结果(需用webkit核浏览器查看,如Chrome,下同):

box-flex第二种用法实例:

<div class="demo02">

<input placeholder="百分百宽度输入框" type="text">

</div>

<style type="text/css">

.demo02{display: -webkit-box;}

.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}

</style>

更多信息欢迎访问(www.cdtedu.com)

上一篇:Web前端开发究竟是什么?
下一篇:js获取浏览器宽高(可视)
选择城市和中心
贵州省

广西省

海南省