【经验心得】固定布局做到各手机屏幕适配简单粗暴的方法

最新推荐文章于 2021-03-07 21:35:53 发布

weixin_33762321

最新推荐文章于 2021-03-07 21:35:53 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/zhp404/articles/4299496.html

版权

1、viewport 简单粗暴的方式：

 
         < 
         meta 
          name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

直接设置viewport为320px的1.3倍，将页面放大1.3倍。

为什么是1.3？

目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320 = 1.171875，iphone6+则是 414/320 = 1.29375
那么以1.29倍也就约等于1.3了。

复制以下头部，以320 的设计稿制作便可。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
<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">
<meta content="email=no" name="format-detection">

转载于:https://www.cnblogs.com/zhp404/articles/4299496.html