【关于viewport的研究】的更多相关文章

关于viewport的研究

昨天项目中用到了适应移动端显示的viewport,一般的使用方式如下: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但这样不能达到我想要的效果,及在竖屏时宽度为320像素,横屏时也是320像素,就是横屏时自动放大, 试了半天一直以为是调整width值的问题,最后才发现,原来要这样写: <meta name="viewport" co…

移动WEB viewport 相关知识

了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题对viewport展开讲解. 一.viewport[此处的viewport即layout viewport]概念 移动设备的viewport是指设备屏幕上能够显示网页的一块区域. 这块显示网页的区域可能比浏览器可视区域大,也可能比浏览器可视区域小,切图时也可以设置.默认情况,移动设备的viewport大于移动…

你可能不知道的viewport

概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?百思不得其解,最后无意中看别人说viewport的默认值是980px,才知道原来是viewport的锅. 于是我深入的复习了一下viewport相关知识,把心得记录下来,供以后开发时参考,相信对其他人也有用. 基础概念 本来看了移动前端开发之viewport的深入理解,但是仍然有一些概…

关于TileBrush中Viewbox，Viewport以及Stretch，AlignmentX/Y的详细研究

我们知道TileBrush是WPF中一个战斗力爆表的虚基类,从它派生出的DrawingBrush,ImageBrush和VisualBrush在WPF图形编程中发挥着重要作用.然而关于TileBrush的Viewbox.Viewport两大重要属性经常令人感到迷惑,Stretch.AlignmentX/Y两种对齐方式也往往让人搞混.这些知识在MSDN上讲得过于模棱两可,网上似乎也没有能够很清晰并且有条理地讲述它们之间关系的文章.于是今天下午我又牺牲了一下午的大好时光,做了一些实验来研究这个问题.…

【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅,文中难免会有不同程度的错误,请您指正留言 PS:事件阶段一节请看最新博客,之前理解有误 javascript事件基础 我们的网页之所以丰富多彩并具有交互功能,是因为我们的javascript脚本语言,而javascript与HTML之间的交互又是通过事件机制实现的 所以,事件是javascript一…

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览…

又到周末了，我们一起来研究【浏览器如何检测是否安装app】吧

前言 扯淡 这个月比较倒霉,我送了女朋友一台笔记本电脑作为生日礼物,结果15天一过电脑就坏了,悲剧的我还把电脑盒子给扔了!淘宝不给换更不给退 于是被女朋友臭骂了一过星期后,今天本来在公司有任务的,但是去修了个电脑(换主板啊......),一蹉跎就快五点了,现在反正干劲也不行,就写篇博客吧 需求 上周五的时候,确切说是周四晚上,老板终于又递上了一个神奇的需求 浏览器检测手机是否安装app 尼玛,反正在我看来,这个需求够奇葩的,当时我还一致认为不能完成,但是最后也居然想出了(抄出了)一个办法,于是这…

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

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

CSS之viewport 2

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身. 移动浏览器的问题 当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸.为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的:不管是对其进行缩放直到文字小得无法阅读,还是在…

简单研究Android View绘制三 布局过程

2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /** * Assign a size and position to a view and all of its * descendants * * <p>This is the second phase of the layout mechanism. * (The first is measur…