移动端页面利用好viewport,适配各种宽度屏幕
最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用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,适配各种宽度屏幕的更多相关文章
- 使用viewport中的vm来适配移动端页面
前言 作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题. Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切 ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 使用vw做移动端页面的适配
Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- CSS3——PC以及移动端页面适配方法(流体布局)
流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...
- 利用websocket实现手机扫码登陆后,同步登陆信息到web端页面
新手必看 广播系统 事件系统 准备工作 初始化项目 引入 laravel-websockets 软件包 启动 websocket 监听 主要流程 创建两个页面 建立 socket 连接 手机端扫码登陆 ...
- 轻松使用px为单位开发移动端页面
研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值 ...
- 移动端开发(一. Viewport(视窗))
手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 ...
随机推荐
- 检测浏览器(BOM)以及地址栏网址的API
navigator.userAgent //检测浏览器的版本以及那个厂商的 (不怎么准,你比如360经常跟别人干架,所以别人检测到360浏览器就提示浏览器危险,所以360就自己修改了) //分解这个地 ...
- Gtk 窗口,控件,设置(添加图片等)
1.关于窗口 // 创建顶层窗体,后面有POPUP的 GtkWidget *main_window; main_window = gtk_window_new (GTK_WINDOW_TOPLEV ...
- [转载]解决linux 下多线程错误 undefined reference to `sem_init'
转自:https://blog.csdn.net/yzycqu/article/details/7396498?utm_source=copy 解决linux 下多线程错误 undefined ref ...
- BZOJ 1055: [HAOI2008]玩具取名(记忆化搜索)
http://www.lydsy.com/JudgeOnline/problem.php?id=1055 题意: 思路:记忆化搜索. #include<iostream> #include ...
- react native 第三方组件react-native-swiper 轮播组件
github地址:https://github.com/leecade/react-native-swiper 使用方法:安装:npm i react-native-swiper –save 查看模块 ...
- BaseEditor
using UnityEngine;using System.Collections.Generic;using UnityEditor;using System.Text;using System. ...
- tkinter拦截关闭事件
import tkinter as tk from tkinter import messagebox root = tk.Tk() def on_closing(): if messagebox.a ...
- SpringBoot之profile的使用
Profile配置是针对不同的环境提供不同的配置支持,比如,在开发环境的配置和测试环境下的配置不同,那么就可以使用Profile配置来实现该要求. 在你的src/main/resources下建立相应 ...
- 大数据新手之路四:联合使用Flume和Kafka
Ubuntu16.04+Kafka1.0.0+Flume1.8.0 1.目标 ①使用Flume作为Kafka的Producer: ②使用Kafka作为Flume的Sink: 其实以上两点是同一个事情在 ...
- vue-循环标记列表元素
<el-col :lg="4" class="list" v-for="(item,index) in picList"> &l ...