viewport

原文转自： 点我 转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。 想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 代码如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain

前言 相信对移动端有了解的朋友对iScroll这个库非常熟悉吧，今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一，我们这次先根据iScroll功能自己实现其功能，然后再学习iScroll源码 下面先给出iScroll官方的例子和源码，要看效果的朋友自己去看吧： https://github.com/cubiq/iscroll 本人能力有限，文中有误请提出 viewport 在移动端新出了一个属性叫做“viewport”，这个便是我们手机上的虚拟视口（viewport），也就是视觉窗口，显示区域 移动设备的显示区域比电脑小得多（但也方便得多），为了让手机显示的更加友好，Apple提供了一个方法：在浏览器定义了viewport meta标签 他的作用就是创建一个虚拟窗口，这个虚拟窗口接近桌面浏览器（980px），事实上viewport就是用以放大缩小网页内容 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度

转自nehe的教程:Using gluUnProject http://nehe.gamedev.net/article/using_gluunproject/16013/ CVector3 GetOGLPos(int x, int y) { GLint viewport[4]; GLdouble modelview[16]; GLdouble projection[16]; GLfloat winX, winY, winZ; GLdouble posX, posY, posZ; glGetDoublev( GL_MODELVIEW_MATRIX, modelview ); glGetDoublev( GL_PROJECTION_MATRIX, projection ); glGetIntegerv( GL_VIEWPORT, viewport ); winX = (float)x; winY = (float)viewport[3] - (float)y; glReadPixels( x, int(winY), 1, 1, GL_DEPTH_COMPONENT, GL_FLOAT, &winZ ); //获取深度值 gluUnProject( winX, winY, winZ, modelview, projection, viewport, &posX, &posY,

相对于桌面端浏览器，移动端Web浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限，因此要做好移动端Web上的优化往往需要做更多的事情。首先，在移动端Web的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。需要注意的是，并不是移动端的优化原则在桌面浏览器端就不适用，而是由于兼容性和差异性的原因，一些优化原则在移动端更具代表性。 一、网络加载类 1．首屏数据请求提前，避免JavaScript文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化 由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。目前中国联通3G的网络速度为338KB/s（2.71Mb/s）

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。 rem定义及浏览器支持情况 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。可以先看看rem的浏览器支持情况： Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size. Reportedly does not work on Android 4.3 browser for Samsung Note II or the Samsung Galaxy Tab 2 on Android 4.2. Borders sized in "rem" disappear when the page

1.pixel像素基础 1.px:csspixel 逻辑像素，浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注：为什么不使用默认的980px的布局viewport 原因： 宽度不可控制，不同的系统设备的默认值都可能不同 页面缩小版显示，交互性不友好 链接不可点 有缩放，缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小，不规范 <meta name="viewport" content="name=value,name=value">来改变默认值 3.viewport meta标签 <meta name="viewport" content="name=value,name=value"> 1.width:设置布局viewport的特定值,但是为了适应所有的不同尺寸的手机屏幕大小，用，device-width自适应用户的屏幕大小。 2.initial-scale:设置页面的初始缩放：公式：window.innerWidth/document.body.ClientWidth. 3.minimun-scale:最少缩放 4.maximun-scale:最大缩放 5.user-scalable:用户能否缩放