最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用rem单位,而是利用js动态设置mete的viewport来达到适配的效果。

感觉挺不错的,也不需要计算什么东西,单位继续用px.代码分享下:

// 计算缩放比例
(function () {
var phoneScale = parseInt(window.screen.width) / 375;
document.write('<meta name="viewport" content="width=375, minimum-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=no">');
})();

移动端页面利用好viewport,适配各种宽度屏幕的更多相关文章

  1. 使用viewport中的vm来适配移动端页面

    前言 作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题. Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切 ...

  2. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  3. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

  4. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  5. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  6. CSS3——PC以及移动端页面适配方法(流体布局)

    流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...

  7. 利用websocket实现手机扫码登陆后,同步登陆信息到web端页面

    新手必看 广播系统 事件系统 准备工作 初始化项目 引入 laravel-websockets 软件包 启动 websocket 监听 主要流程 创建两个页面 建立 socket 连接 手机端扫码登陆 ...

  8. 轻松使用px为单位开发移动端页面

    研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值 ...

  9. 移动端开发(一. Viewport(视窗))

    手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏  ...

随机推荐

  1. 基于SVM的python简单实现验证码识别

    验证码识别是一个适合入门机器学习的项目,之前用knn 做过一个很简单的,这次用svm来实现.svm直接用了开源的库libsvm.验证码选的比较简单,代码也写得略乱,大家看看就好. 1. 爬取验证码图片 ...

  2. C# winform窗体间传值(使用委托或事件)

    窗体间传值 今天得空,刚好看到网上好多人再找winform窗体间传值的问题,由于昨天项目的优化的感觉不错,就写了个C# winform窗体间传值的demo,希望能给需要的人的带来帮助: 工程的源代码地 ...

  3. Mybatis中sql语句中的in查询,判断null和size为0的情况

    不严谨的写法,可能会报错:in (),这种情况不符合SQL的语法,导致程序报错. 如果简单只做非空判断,这样也有可能会有问题:本来in一个空列表,应该是没有数据才对,却变成了获取全部数据! 所以一个比 ...

  4. 大整数加法 HDU1002

    今天早上没事干又把这个敲了一遍,虽然手冻得不行,不过又深入理解理解还可以哈. 难点就在给你的整数可能很大很长,所以long long 肯定不行,得用字符串来读取存储,然后注意一下相加的时候进位,最后输 ...

  5. python3.5学习第二章(1)标准库,bytes

    一.输出python库的路径: 1.sys标准库 import sysprint(sys.path) 结果: 'E:\\python练习\\python35学习\\Day2', 'E:\\python ...

  6. springBoot集成Redis遇到的坑(择库)源码分析为什么择库失败

    提示: springboot提供了一套链接redis的api,也就是个jar包,用到的连接类叫做LettuceConnectionConfiguration,所以我们引入pom时是这样的 <de ...

  7. SQL左右连接中的on and和on where的区别

    SQL左右连接中的on and和on where的区别 左联时,ON后面的对左边表的条件对左边表数据无影响(因为左连接符合左边所有条件),但对右边表数据有影响,只有符合左边表条件时,右边表数据才会查出 ...

  8. (转)c# String与StringBuilder

    阅读目录 1.什么时候用String?什么时候用StringBuilder? 2.String与StringBuilder的区别 总结   1.什么时候用String?什么时候用StringBuild ...

  9. lncRNA表达定量方法评估

    见文章:Benchmark of lncRNA Quantification for RNA-Seq of Cancer Samples Overall, 10-16% of lncRNAs can ...

  10. libavcodec是一款LGPL自由软件编解码库,用于视频和音频数据的编解码工作

    http://zh.wikipedia.org/zh-cn/Libavcodec http://baike.baidu.com/view/856526.htm libavcodec是一款LGPL自由软 ...