【转】移动端viewport的使用

　　web端网站转移至移动端页面，注意点如下：

1.首先引入viewport调整页面宽度

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.css中1px并不等于设备的1px

原文转自：http://www.cnblogs.com/2050/p/3877280.html

时间： 2024-10-03 19:29:02

【转】移动端viewport的使用的相关文章

移动端viewport基础知识

苹果6的基本信息: 屏幕尺寸:4.7英寸分辨率:1334*750 视口大小:375*667 布局视口:980*1429 1. 屏幕尺寸: 屏幕尺寸并不是指屏幕的宽和高,是指屏幕对角线的长度,单位是英寸,屏幕尺寸可用来计算像素密度,像素密度就是指每一英寸能够显示的像素(和分辨率有关)的数量. 2. 分辨率: 是指设备显示的最小单元,和屏幕的制作工艺有关.1334*750(高*宽)是设备的物理像素. 像素密度的计算公式:√(13342+7502)/4.7(勾股定理). 3. 视口大小: 可以

移动端Viewport & 使用rem来开发移动端网站

Viewport大神无双的精彩解释具体参数各型号是否支持参见: http://www.cnblogs.com/2050/p/3877280.html#commentform 摘录: 移动设备上的viewport: 设备的屏幕上能用来显示我们的网页的那一块区域设备像素比: docment.devicePixelRatio = 物理像素 / 独立像素在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素. 一些设备上浏览器的默认

移动端 viewport设置

viewport总结

我在无意中看到这样一个专题页http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl,正好我看了一下它的代码,我看到它的图片设置的都是px单位,我就想px单位怎么做自适应呀,然后我就调整浏览器测试窗口的大小,发现完美适配,我又像是不是js动态控制窗口文档大小了,但是html上面也没有行内样式fontsize的变化,因此它并没有使用基于字体的rem方案.我当时就纳闷了,这是什么神奇的技术,如此厉

深入浅出 Viewport 设计原理

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设计原理,希望能给读者带来更加清晰.更加全面的技术认知. 一.引言在PC时代,我们用 css 设置 1px 边框,显示器会用1个物理像素进行渲染.而进入移动应用时代后,我们原来设置1px边框,在手机上可能需要用 2 个或 3 个物理像素来渲染. 那么,手机为什么要这么做?解决了什么问题?以及我们开发

碎点小结

1.各主流浏览器内核 IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.<!DOCTYPE html>中DOCTYPE是起什么作用 <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器

自适应设计与响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本.这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度. 于是,很早就有人设想,能不能"一次设计,普遍适用"

最齐全的站点元数据meta标签的含义和使用方法

最齐全的站点元数据meta标签的含义和使用方法随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的IE9.IE10.IE11,对Html5的支持越来越好.html meta标签的功能作用也越来越强大. 首先.先说一下最初产生的一些经常使用meta标签. 从Meta标签的定义说起. Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的<head>标记和<titl

最齐全的网站元数据meta标签的含义和用法

随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9.IE10.IE11,对Html5的支持越来越好,html meta标签的功能作用也越来越强大. 首先,先说一下最初产生的一些常用meta标签.从Meta标签的定义说起. Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的<head>标记和<title>标记之间,它提供用户不可见的信息.META标