手机网站基本框架代码

186 1 年前
一般我们自己手动开发手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现(网页指html5的格式来开发)。另一类是通过CSS3的Media标签(媒介查询)来实现。

一般我们自己手动开发手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现(网页指html5的格式来开发)。另一类是通过CSS3的Media标签(媒介查询)来实现。

在这里我们详细讲解下,利用添加meta标签来做手机网站。

基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。

1. 添加viewport标签

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

详细属性

  1. width  ----  viewport的宽度(width=device-width意思是:宽度等于设备宽度)
  2. height ------  viewport的高度(height=device-height意思是:高度等于设备宽度)
  3. initial-scale ----- 初始的缩放比例
  4. minimum-scale ----- 允许用户缩放到的最小比例
  5. maximum-scale ----- 允许用户缩放到的最大比例
  6. user-scalable ----- 用户是否可以手动缩放

关于viewport的详细原理和知识点,各位就百度吧!在这里我就不做详细的讲解了。

2. 禁止将数字变为电话号码

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

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

3. iphone设备中的safari私有meta标签

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

它表示:允许全屏模式浏览,隐藏浏览器导航栏

4. iphone的私有标签

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

它指定的iphone中safari顶端的状态条的样式,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

另外还有一个个性化的link标签,它支持用户将网页创建快捷方式到桌面时,其图标变为我们自己定义的图标。比如手机腾讯网上的标签:

<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">

不过腾讯对这个png图标的命名并不规范,常规我们要求文件名应为 apple-touch-icon.pngapple-touch-icon-precomposed.png,前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果。

手机网站基本框架代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手机网站基本框架代码</title>
    <meta name="description" content="xxx">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="xxx">
</head>
<body>
<div class="warp">
    xxx
</div>
<script>
    var t = 0;
</script>
</body>
</html>

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起,有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位,能实现响应式的那种。它是相对于html根元素来设置当前文字大小,或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同,所以才使用rem的。

原来大部分的人依旧是使用PX来布局,rem都用的少。目前来说,就移动端的淘宝首页就是采用rem来作为单位来布局的。

关于手机网站的调试问题

一般我们采用的:在浏览器调试+真机测试,因为浏览器毕竟只是一个模拟工具,实际开发的话,我们还得用真机去测试。

比如:(Android类手机,iPhone5、5s、6、6Plus...)

而在浏览器上测试,可以chrome(谷歌浏览器)的F12调试工具:有个手机样的小图标,点击就能模拟手机测试。

分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6