Setcina（目前还在更新以及完善中...）

移动端网站开发要点

2018-12-02

Head标签中要点

标注作者

1
<meta name="author" content="网站域名"/>

在浏览器中页面将以原始大小显示，并不允许缩放

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  • width:viewport的宽度（范围从200到10,000，默认为980像素）
  • height:viewport的高度（范围从223到10,000）
  • initial-scale:初始的缩放比例（范围从>0到10）
  • minimum-scale:允许用户缩放到的最小比例
  • maximum-scale:允许用户缩放到的最大比例
  • user-scalable:用户是否可以手动缩放

在浏览器中页面中出现的手机号码将不以拨号的超链接的形式出现，在iphone中默认以超链接形式出现（无需添加）

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

不识别页面中出现的邮箱

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

开启页面对webapp程序的支持，一开始不需要添加

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

在webapp应用下状态条(屏幕顶部条)的颜色,默认default为白色，可以定义为黑色black和灰色半透明black-translucent。

1
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
  • 注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

苹果web app持有

“添加到主屏幕“后，全屏显示（完全不明白,可以添加）

1
<meta name="apple-touch-fullscreen" content="yes">

删除默认的苹果工具栏和菜单栏,默认是显示（无需添加）

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

在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标，换句话就是：这个link就是设置webapp的放置主屏幕上icon文件路径

1
2
3
4
//IOS
<link rel="apple-touch-icon" href="iphone_milanoo.png"/>
//Android
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png"/>
  • 注意：该路径需要注意的就是放到将网站的文档根目录下而不是服务器的文档的根目录

设置启动时的界面显示的图片

1
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
  • 注意：该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
    官方规定启动界面的尺寸必须为320*640（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。

几个网站的离职

红岭创投

1
2
3
4
5
6
7
8
9
10
11
12
<title>值得信赖的P2P网络借贷平台_红岭创投</title>
<meta name="author" content="m.my089.com" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-iphone72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-iphone144.png" />

天猫

1
2
3
4
5
6
7
<title>天猫触屏版</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
<meta charset="utf-8">             
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 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">

淘宝

1
2
3
4
5
6
7
8
9
10
11
12
<title>淘宝网触屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">

京东

1
2
3
4
5
<title> 京东 - 手机版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品">
<meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品，手机快捷购物，就上京东手机版。">

网易

1
2
3
4
5
6

<title>手机网易网</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">

百度

1
2
3
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
Tags: 移动Web
← 10-在Vue中如何处理跨域问题 利用@media screent实现网页响应式布局 →

扫描二维码，分享此文章