移动端页面利用好viewport,适配各种宽度屏幕

时间:2022-02-18 06:52:49

最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用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. 移动端开发(一&period; Viewport&lpar;视窗&rpar;)

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

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

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

随机推荐

  1. Sqli-LABS通关笔录-6

    第六关跟第五关一样的是布尔型盲注技术. 只是在部分有出路 添加一个单引号.程序无反应.双引号和斜杠可使其报错. 这一关让我学到了 1.管他三七二十七报错看看语句再说. THE END

  2. HDU4309-Seikimatsu Occult Tonneru&lpar;最大流&rpar;

    Seikimatsu Occult Tonneru Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  3. oracle系列--基础理论

    一.数据库系统架构: 外层(External Level)外层是提供给用户直接操作使用的 概念层(Conceptual Level)用来描述数据库中存放数据的类型.表之间的关系.高级的数据模型.用户的 ...

  4. CentOS环境下tomcat启动超级慢的解决方案

    在本地开发环境,应用正常启动. 在CentOS测试环境,应用启动速度也是正常的. 但是在阿里云的生产环境,tomcat启动超级慢,并且在最终打印出来以下内容: org.apache.catalina. ...

  5. SpringBoot application&period;yml logback&period;xml&comma;多环境配置&comma;支持 java -jar --spring&period;profiles&period;active

    趁今天有时间整理了一下 启动命令为 //开发环境 java -jar app.jar --spring.profiles.active=dev--server.port=8060 //测试环境 jav ...

  6. Atitit 开发进度 开发效率提升解决方案

    Atitit 开发进度  开发效率提升解决方案 1.1. 使用4gl语言 dsl语言尽可能 1 1.2. Ssd+高屏幕显示器,提升硬件 1 1.3. 汉字命名规范,可以大力提升可读性与效率 1 1. ...

  7. Linux内存管理--虚拟地址、逻辑地址、线性地址和物理地址的区别&lpar;二&rpar;【转】

    本文转载自:http://blog.csdn.net/yusiguyuan/article/details/9668363 这篇文章中介绍了四个名词的概念,下面针对四个地址的转换进行分析 CPU将一个 ...

  8. LR参数和变量

    一.参数: 1. 在LR函数中可以直接使用参数.参数必须在双引号“”中才能应用.大部分情况下,可以直接用参数代替函数中双引号内的数据.如下使用方法: lr_save_string("http ...

  9. &lbrack;BZOJ2730&rsqb;矿场搭建

    Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...

  10. 【面试题046】求1&plus;2&plus;&period;&period;&period;&plus;n

    [面试题046]求1+2+...+n 题目:     求1+2+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C).   思 ...