好久都没更新博客了,最近一年转型移动端,当然网页端也得兼顾,慢慢写一写基本性的文章,多积累。

本期介绍下viewport的一些使用:

先看看viewport在页面中的样子:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

先罗列下移动页面遇到的单位:

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,窗口可大于或小于手机的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。

HTML5之viewport使用的更多相关文章

  1. html5中viewport使用

    html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...

  2. HTML5之Viewport详解

    做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...

  3. [转] 移动平台Html5的viewport使用经验

    转自:http://blog.csdn.net/wuruixn/article/details/8591989 问题描述 web页面采用html5技术实现,在系统登录页面中使用frameset.fra ...

  4. HTML5的viewport使用

    viewport 语法介绍: <!-- html document --> <meta name="viewport" content=" height ...

  5. html5中viewport与meta详解

    网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...

  6. HTML5 Viewport Meta Tag

    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...

  7. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...

  8. cocos2d-js 入门 (主要是HTML5)

    cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone ...

  9. 2016.3.16__HTML5新特性__第八天

    HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签, ...

随机推荐

  1. 1.2.2 Text_Reverse

    Text Reverse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Proble ...

  2. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.4 LHS简介&Pattern

    LHS简介 在规则文件组成章节,我们已经了解了LHS的基本使用说明.LHS是规则条件部分的统称,由0个或多个条件元素组成.前面我们已经提到,如果没有条件元素那么默认就是true. 没有条件元素,官方示 ...

  3. WebSocket(二)-WebSocket、Socket、TCP、HTTP区别

    原文地址:Socket 与 WebSocket 1. 概述 WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的.在传统的 Web 中,要实现实时通信,通用的方式是采用 HTT ...

  4. ZH奶酪:隐马尔可夫模型学习小记——forward算法+viterbi算法+forward-backward算法(Baum-welch算法)

    网上关于HMM的学习资料.博客有很多,基本都是左边摘抄一点,右边摘抄一点,这里一个图,那里一个图,公式中有的变量说不清道不明,学起来很费劲. 经过浏览几篇博文(其实有的地方写的也比较乱),在7张4开的 ...

  5. No result defined for action com.nynt.action.ManageAction and result input问题

    No result defined for action com.nynt.action.ManageAction and result input 问题原因: 1). 在action类中定义的一个r ...

  6. 在Win7下新建库并修改图标

    win7中在库中添加桌面方法详解 1.在空白处,鼠标右键选择新建——库. 2.命名为桌面,然后选择桌面. 3.鼠标右键选择属性. 4.点击包括文件夹. 5.选择桌面,点击包括文件夹按钮. 6.点击确定 ...

  7. 浏览器的自动翻译会影响 JS 逻辑

    有人在 QQ 群里反馈,官方注册后跳转时出现 Bug. 收到群友非常有用的资讯,这是因为浏览器的自动翻译功能引起的. 11:04:21[潜水]Better Command 2017/12/30 11: ...

  8. shell教程-002:常见的Shell种类

    Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Sh ...

  9. Ubuntu 安装lrzsz工具

    rz(上传) sz(下载)) 1. 安装 sudo apt-get install lrzsz 2. rz可覆盖原文件 rz -y

  10. MySQL 查看编码 排序规则

    查看数据库的排序规则 mysql> show variables like 'collation%'; +----------------------+-------------------+ ...