浅谈移动端三大viewport

【浅谈移动端三大viewport】的更多相关文章

浅谈移动端三大viewport

我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 可能我们只知道这三个字段的含义(视口宽度等于设备宽度,屏幕缩放为1,禁止用户缩放),但是为什么要这么写,其原理又是什么呢? 我们先看一个简单的demo吧. <!doctype html> <html la…

浅谈移动端适配-rem

对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单位,意指显示器上一个个的点.从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了. 2.分辨率,屏幕上物理像素的数量. 3.设备独立像素(dip),又称密度无关像素.可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素.由相关系统转化为物理像素在…

浅谈移动端中的视口（viewport）

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. 而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport).视觉视口(Visual Viewport)和理想视口(Ideal Viewport). 本文主要讨论移动端中的视口. 1. 基本概念 1.1 两种像素像素是计算机屏幕中显示特定颜色的最小区域.屏幕中的像素越多,同一…

浅谈移动端之touch事件--手指的滑动事件

今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefa…

开园子啦（浅谈移动端以及h5的发展）

一.前言一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我是一个前端工程师,就职于某化妆品电商,其实大家一猜就知道是哪个公司啦.就是股票跌得比较严重的公司,所以领导的火气多比较大.公司一直以来也比较忙,各种活动接踵而至,可就苦了我们这帮程序猿.废话不说,先聊聊打算写博客的内容.也希望大家关注.给我提多多意见,一起成长.一起学习. 二.关注的博客目前比较关…

浅谈移动端rem的用法

一什么是rem? “font size of the root element 这是w3c的定义也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位,大部份的默认字体单位是16px. 图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html 二简单应用. 既然确定在各个主流浏览器都能食用的话,我们就放心大胆在移动端进行开发了. 举个例子说明 html{ font-size…

浅谈移动端设备标识码：DeviceID、IMEI、IDFA、UDID和UUID

---恢复内容开始--- 转:https://www.jianshu.com/p/38f4d1a4763b [心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番搜索资料+请教大神,整理出此文. 因为自己是产品经理,所以出发点是整理知识点.理解个大概.知道什么不能用.什么标识是靠谱的,并不研究太深入.毕竟非专业开发,有时候若了解知识点太深入,反倒会更困惑(关联知识点太多).即使研究清楚了,工作中碰到和自己研究相悖的情况,也不好丢个文档告诉开发应该怎么做(除非…