最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用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. 轻松使用px为单位开发移动端页面

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

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

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

  9. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

随机推荐

  1. MySQL------如何将SQLServer文件数据迁移到MySQL

    转载: http://blog.csdn.net/zhangdaiscott/article/details/46412453

  2. stl空间配置器线程安全问题补充

    摘要 在上一篇博客<STL空间配置器那点事>简单介绍了空间配置器的基本实现 两级空间配置器处理,一级相关细节问题,同时简单描述了STL各组件之间的关系以及设计到的设计模式等. 在最后,又关 ...

  3. Codeforces Beta Round #75 (Div. 1 Only) B. Queue 线段树+二分

    B. Queue Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/problem/91/B Descrip ...

  4. 编辑器&amp;IDE中适合程序员的字体

    adobe的免费字体 source Code Pro

  5. bzoj2144 【国家集训队2011】跳跳棋

    Description 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子.我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他 ...

  6. 分享超好用的截动图工具ScreenToGif

    安装很简单,首先看看本地是否安装了.Net Framework 4.6.1,没有就在微软官网搜一下,选[离线安装包]版本 下载安装后,直接安装ScreenToGif即可使用(有绿色版,免安装) htt ...

  7. pip安装提示pkg_resources.DistributionNotFound: pip==18.1

    在用pip install安装依赖的时候提示pkg_resources.DistributionNotFound: pip==18.1,更新一下pip就可以了 easy_install pip==18 ...

  8. 服务容错保护断路器Hystrix之二:Hystrix工作流程解析

    一.总运行流程 当你发出请求后,hystrix是这么运行的 红圈 :Hystrix 命令执行失败,执行回退逻辑.也就是大家经常在文章中看到的“服务降级”. 绿圈 :四种情况会触发失败回退逻辑( fal ...

  9. 都是用 DllImport?有没有考虑过自己写一个 extern 方法?

    你做 .NET 开发的时候,一定用过 DllImport 这个特性吧,这货是用于 P/Invoke (Platform Invoke, 平台调用) 的.这种 DllImport 标记的方法都带有一个 ...

  10. C# 如何使用 RabbitMQ 实现消息收发

    本文是基于http://www.cnblogs.com/cheng-lei/articles/7274513.html的项目结构进行搭建的,了解之前请先阅读http://www.cnblogs.com ...