移动端页面模板viewport

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> -------------- …

一.viewport的概念移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小. 在默认情况下,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewp…

移动端开发-viewport

1.viewport viewport 即设备屏幕上显示网页的区域.因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px 宽或者是其他值(不同的设备可能不一样),但带来的后果就是当网页过宽浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小. 2.像素和物理像素说到像素和物理像素,就得说一下DPR(devicePixelRatio) 这个词了,DPR表示屏幕 “显示像素” 与 “…

浅谈移动端三大viewport

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

移动端开发-viewport与媒体查询

首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题提到响应式设计,大家首先想到的可能是 Bootstrap , @media . @media(媒体查询)是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计.示例代码如下: @media screen and (min-width: 960px) { body { background-color: blue; } } @media screen a…

移动端meta viewport

移动端与PC端的viewport

第一种解析: 设备像素,就是我们直觉上觉得"靠谱"的像素,这些像素为所使用的各种设备提供了正规的分辨率,并且其值可以通过(通常情况下)从screen.width/height属性中读出: css像素,就是css自定义的像素,需要注意的是css像素与设备像素不是一回事: 第二种解析: CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. PPI(DPI)的计算公式: 1 css…

移动端布局最佳实践（viewport+rem）

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用…

移动端适配（rem & viewport）--移动端开发整理笔记（四）

移动端适配通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸我们知道,在不同的手机设备,分辨率大小是不一样的.为了使页面在不同分辨率下等比缩放,需要动态的设置Html的字体大小来达到页面等比缩放的效果.我们可以如下设置rem值: function() { var html = document.querySelector("html"); var width = html.getBoun…

viewport理解

viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dppx = 96dpi dpr = 设备物理像素 / 设备独立像素设备物理像素指显示在移动端中实际的像素.设备独立像素是css中定义的像素. 比如说iphone4 的 dpr = 2,而此时设置border的宽度为1px(设备独立像素),那么此时设备物理像素为2px.所以在移动端上看到的是2px的边…