让网页更适配移动设备

来看一下手机淘宝的效果。打开 chrome , 输入 https://m.taobao.com ,等待页面加载完毕点击 chrome 菜单中的添加到主屏幕,看到可以在桌面生成一个快捷图标,点击图标进入,可以看到直接变成一个全屏的单独页面,给用户体的验更好。查看页面源码,发现需要添加以下代码去适配。

淘宝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="dns‐prefetch" href="https://image.uc.cn">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<link href="" rel="apple-touch-icon-precomposed">
<link href="https://ww1.sinaimg.cn/large/8c9b876fjw1f7zaijlukpj2040040t8m.jpg" rel="Shortcut Icon" type="image/x-icon">
</head>
<body>
.....
</body>
</html>

这里是我给自己的网页适配后的效果。更多配置可以转到Install to Homescreen

joke

参考链接

文章来自: https://hanks.pub