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

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

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

h5适配华为手机_rem、px、em(手机端h5页面屏幕适配的几种方法)
px px像素(pixel):相对长度单位.相对于显示器屏幕分辨率而言.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和r ...
Android开发——Android手机屏幕适配方案总结
0. 前言 Android的屏幕适配,即使得某一元素在Android不同尺寸.不同分辨率的手机上具备相同的显示效果,这个问题一直以来都是我们Android开发者不得不面对的问题.本文参考了很多前人的博 ...
页面自适应各种手机屏幕：阿赛特别方法处理页面固定宽度适应各种终端的解决方案
<!doctype html> <html><head><meta charset="utf-8"><meta name=&q ...
android手机屏幕适配理论知识
对于具有相同像素密度的设备来说,像素越高,尺寸就越大,所以可以换个思路,讲问题从单纯的尺寸大小转换到像素大小和像素密度的角度来占比最高的是480*800,320*480的设备竟然也占据了很大比例,但 ...
h5 手机屏幕适配—REM
一.rem.em和px之间的关系使用rem之前,先得弄清楚rem.em和px之间的关系,特别是每一个单位的使用跟代码块的继承之间的关系: 单位代码地址运行后截图说明 px https: ...
mdpi的手机_【初印象】Android手机屏幕适配API：nodpi,xhdpi,hdpi,mdpi,ldpi
Android的碎片化设备状况,使得其API必须在不同的屏幕中选取合适的算法并展示,而在API级别上,的确也是有类似的定义,当然,我也终于明白,这是Android的显示效果始终跟不上苹果的原因苹果的 ...
【初印象】Android手机屏幕适配API：nodpi,xhdpi,hdpi,mdpi,ldpi
为什么80%的码农都做不了架构师?>>> Android的碎片化设备状况,使得其API必须在不同的屏幕中选取合适的算法并展示,而在API级别上,的确也是有类似的定义,当然,我也 ...
手机屏幕适配原理及实现
为什么80%的码农都做不了架构师?>>> 手机屏幕是用户与 App 最直接的交互点不同的分辨率下用户对我们的 App 具有明显的感观差异,主流分辨率的更新迭代却又完全独立于 ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...

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

1、viewport 简单粗暴的方式：

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

最新文章

热门文章