【viewport的作用】的更多相关文章

HTML5开发手机应用--viewport的作用

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp…

viewport的作用

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素).height:和 w…

HTML5开发手机应用--viewport的作用--20150216

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp…

webapp思路和rem适配极其viewport

webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般(手机浏览器)默认的是960px左右,就把页面压缩到 960px显示,所以是比手机屏幕宽的哟.等比放小,所以,为了显示的好看,要设定viewport为屏幕宽,就是:如此标签 <meta name="viewport" content="width=device-width,…

适配方案（四）适配的基础知识之单位、分辨率、viewport

适配的基础知识 一.理解单位 px.pt.pc.sp.em.rem.dpr.dp.dip.ppi.dpi.ldpi.mdpi.hdpi.xhdpi.xxhdpi 如果你是ios开发,你需要了解的单位:pt,px,ppi:实际开发中用到的单位:pt. 如果你是android开发,你需要了解的单位:dip/dp,sp,px,dpi/ppi,ldpi,mdpi,hdpi,xhdpi,xxhdpi:实际开发中用到的单位:dp,sp. 如果你是前端开发,你需要了解的单位:px,em,rem,dpr:实际开…

pc端和移动端的“窗口”(viewport)故事（part1）

A tale of two viewports - part one 在以下的系列文章中,我将为大家解释浏览器中的视窗和一些重要的元素的尺寸是如何起作用的,如:大家最熟悉的html元素以及window和screen对象. 这篇文章作是本系列的第一部分,是关于台式电脑的浏览器的,主要目的是为后续的移动端浏览器的讨论奠定一个基础.大部分的web开发者能够凭直觉理解大部分台式机浏览器的概念.在移动端我们也将遇到一样的概念,不过对于这些人人都知道的概念进行更加复杂和预先的讨论将会极大地帮助大家理解移动端…

基于淘宝弹性布局方案lib-flexible的问题研究

上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewport的initial-scale,导致viewport的width不等于device width,使得那些根据width编写的media query不一定与预期的一致,还有移动web经典的retina屏图片问题和1px边框问题在lib-flexible下也会与通常的做法有所差异,本文的内容就是研究这些东西,…

了解真实的『REM』手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗? 首先我们来看看使用 rem 实现手机屏幕适…

淘宝弹性布局方案lib-flexible研究

1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈现最佳的界面效果.典型的例子是,有一个商品列表页,应用响应式布局后,可能在pc上是用4列展示,在平板上用3列展示,在手机上只用1列展示.这种布局的最大好处就是节省人力.资源和时间,所以很多公司都喜欢用.而响应式布局有两个必须的要求: 1)是viewport的设置,width跟initial-scal…

动态rem与1px边框问题的理解

当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题: 如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用到动态rem来解决问题. 1:拿到屏幕宽度,以屏幕宽度作为rem的基准值 2:如果觉得基准值过大,将px换算成rem比较麻烦,可以将基准值缩小10倍 3:因谷歌浏览器有一个最小字体值,所以基准值不要低于这个最小字体值(12px). 4:将rem赋值给html var width = window.s…