分辨率

1 为什么要进行Android屏幕适配 由于 Android 系统的开放性，任何用户、开发者、 OEM 厂商、运营商都可以对 Android 进行定制，于是导致： Android 系统碎片化 ： 小米定制的 MIUI 、魅族定制的 flyme 、华为定制的 EMUI 等等——当然都是基于 Google 原生系统定制的； Android 机型屏幕尺寸碎片化 ： 5 寸、 5.5 寸、 6 寸等等； Android 屏幕分辨率碎片化 ： 320x480 、 480x800 、 720x1280 、 1080x1920。 屏幕尺寸分布图 据友盟指数显示，统计至 2015 年 12 月，支持 Android 的设备共有 27796 种。 当 Android 系统、屏幕尺寸、屏幕密度出现碎片化的时候，就很容易出现同一元素在不同手机上显示不同的问题。 虽然系统为使您的应用适用于不同的屏幕，会进行缩放和大小调整，但您应针对不同的屏幕尺寸和密度优化应用。 这样可以最大程度优化所有设备上的用户体验，用户会认为您的应用实际上是专为他们的设备而设计，而不是简单地拉伸以适应其设备屏幕。 2 相关概念 2.1 屏幕尺寸 含义：按屏幕对角测量的实际物理尺寸。 为简便起见， Android 将所有实际屏幕尺寸分组为四种通用尺寸：小、 正常、大和超大 单位 : 英寸（ inch ），一英寸≈ 2.54cm 2.2

<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); // andriod 2.3 if (version > 2.3) { document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">'); } else { document.write('<meta name="viewport" content="width=device-width,user-scalable=no">'); } } else { document.write('<meta

这篇文章，我们来研究一下手机H5页面适配不同手机分辨率的问题。 众所周知，手机分辨率自从Android面世以来简直是醉了。320*480、480*800、480*856等等等。苹果公司又出了5，5S，6 ，6+，这样手机的分辨率更多了。 废话不多说，说一下适配方法。 第一种，就是将所有标签的 width设置为100%，所有div的css background 都改成img 便签。 但这种方法真心不是很优秀，而且如果该页面的高度 要求在手机显示屏可以完全显示出来，或者说不需要用户滚动该页面，上面的方法就不行了。 第二种方法就是 固定一个div宽度为320px，其他所有元素都是这个div的子元素，定位问题都是用position:absolute，然后通过获取运行页面浏览器的宽度，使用js代码为这个最外层的div添加scale。 参考代码 如下： var t = function() { setTimeout(function() { var t = document.documentElement.clientWidth, e = document.documentElement.clientHeight, n = (t / 320).toString().substring(0, 6), i = (e / 568).toString().substring(0, 6), r = n;

很多人会遇到这样的问题，当你在自己的电脑上精心制作好网页，却发现在别人的不同分辨率的电脑上浏览你的页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。 目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。 一、 自然拉伸 如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。 二、 固定居中 在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得”不堪入目”。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！ 现在大多数网民都还在用800*600的分辨率

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用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肯定是做过适配的，从 代码 也可以证实这一点：

大家好，本文学习MSAA以及在WebGPU中的实现。 上一篇博文 WebGPU学习（二）: 学习“绘制一个三角形”示例 下一篇博文 WebGPU学习（四）:Alpha To Coverage 学习MSAA 介绍 MSAA（多重采样抗锯齿），是硬件实现的抗锯齿技术 动机 参考 深入剖析MSAA ： 具体到实时渲染领域中，走样有以下三种： 1.几何体走样（几何物体的边缘有锯齿），几何走样由于对几何边缘采样不足导致。 2.着色走样，由于对着色器中着色公式（渲染方程）采样不足导致。比较明显的现象就是高光闪烁。 3.时间走样，主要是对高速运动的物体采样不足导致。比如游戏中播放的动画发生跳变等。 这里讨论几何体走样。 如上图所示，我们要绘制一个三角形。它由三个顶点组成，红线范围内的三角形是片元primitive覆盖的区域。 primitive会被光栅化为fragment，而一个fragment最终对应屏幕上的一个像素，如图中的小方块所示。 gpu会根据像素中心的采样点是否被pritimive覆盖来判断是否生成该fragment和执行对应的fragment shader。 图中红色的点是被覆盖的采样点，它所在的像素会被渲染。 下图是最终渲染的结果，我们看到三角形边缘产生了锯齿： 原理 MSAA通过增加采样点来减轻几何体走样。 它包括4个步骤： 1.针对采样点进行覆盖检测 2

最近一个android项目中使用了1920*1080分辨率的大屏，但是设备不在手边，androidSDK自带的模拟器又没有这么大的分辨率，没法测试，无奈之下就用VirtualBox+android-x86模拟了一个大屏环境。 VirtualBox+android-x86的安装过程网上有很多博文，都写的很详细，如： http://anzhuo.paojiao.cn/android/allinfo/2/69762.html ，其实VmWare也可以装，但是VmWare出来的分辨率都是宽屏，目前好像还没有办法改，virtualbox倒是可以通过vboxmanage.exe灵活自定义各种分辨率，具体方法可参考： http://kenjane.com/virtualbox-android-x86-with-multi-resolutions/ 很多同学都说按照第一个链接的方法安装设置后还是不能上网，我刚开始也是完全按照上边的方法也不能上网，正确的方法是： 1、打开终端模拟器； 2、输入su并回车取得权限； 输入 ifconfig eth0 192.168.7.110 netmask 255.255.255.0 up并回车设置IP； 输入 route add default gw 192.168.7.254 dev eth0 并回车添加网关； 输入 setprop net.dns1 8.8.8

普通的显示，接上 MacBook 发现原生的分辨率设置在 2K 显示器上字体很小，换成 1080P 分辨率显示效果又特别模糊。下面介绍MacBook强行开启 HiDPI。 什么是 HiDPI 它使用横纵 2 个物理像素也就是 4 个物理像素来显示 1 个像素区域，结果就是图像的细节得到翻倍、更清晰、边缘更平滑。 拿 13 寸的 MacBook Pro 举例，它的屏幕物理分辨率是 2560 x 1600，所以原生的 HiDPI 分辨率就是 1280x800。更高的一档 1440x900 HiDPI 缩放分辨率，则是虚拟出一个 2880x1800 的分辨率，再进行软缩放输入。所以你能发现苹果的电脑总是有很高的分辨率。 好了，既然你的屏幕是 1080p，本身就没有那么多像素去合成 HiDPI，如果以原生的显示计算，你这屏幕的 1080p 分辨率应该是 960x540，这么低的分辨率你是没法用的。 这个脚本的功能就是虚拟出比你的屏幕物理分辨率更高的假分辨率……如果你要开启 1080p 的 HiDPI 分辨率，就虚拟一个 3840 x 2160 的假分辨率，然后 macOS 会使用 4 个像素来显示 1 个像素区域，也就是和你物理分辨率一样的 1080p 分辨率。 手动配置 HiDPI 本教程测试环境： 笔记本：MacBook Pro (Retina, 15-inch, Mid 2015)

2014-09-12 richardbao @richardbao 现如今 iPhone 在尺寸上终于“百花齐放”了，有点向 Android 世界发展的趋势。至日前 Apple 发布 iPhone 6 和 iPhone 6 Plus 时，iPhone 家族有了如下五种不同的屏幕： 首先是以实际物理尺寸为准的相对大小，如下图绿色所示： 然而由于屏幕的实际像素密度（ppi）不同，如果按实际像素的数量来比较的话，得到的是下面的相对大小，如蓝色所示： 可以看到，第一代屏幕因为是非 Retina 的，虽然物理尺寸和 iPhone 4/4S 一样，但像素数量少得可怜。而最新发布的 iPhone 6 Plus 虽然设备尺寸比 iPhone 6 只是稍大，但实际像素却多了许多，不愧是 401ppi 的屏幕。 但是，这个 401ppi 的屏幕和之前的 326ppi 的 Retina 屏幕相比，大了不少，但又不够大。在 Retina 绘图系数上显得很尴尬。 比如说，我们在这个屏幕上继续使用 @2x 系数的 Retina，那么同样的一张照片应该显示如下： 此时，1080px 对应的逻辑像素是 540 pt @2x。当我们将其调整回真机物理尺寸的时候，会发现 iPhone 6 Plus 上的图反而变小了： 这样会导致一个尴尬的结果：用户拿着一个大屏手机，字却反而比小屏幕手机更小，更看不清楚。因此，@2x

本人建议：在选购显示器前先确认自己使用显示器的距离，然后根据距离选择尺寸以及分辨率，保证观看清晰。其次是面板与色域，如果没有特别需求，无需过高的色域，99srgb差不多就行了，bit数高点还是好的，要看清楚是不是抖动升上来的。各个面板都有自己的缺陷，没有完美的。反正我显示器无脑ips。刷新率当然高的好，也要看你的电脑性能能不能跟得上，上了144就回不去60了。 在选购显示器之前，我们需要明确自己的用途与预算，这台显示器是办公、游戏、看超清视频还是设计使用的，不同要求，显示器的价格也不同。这样吧，我们先了解一下显示器常见参数的意义。 1、显示器分辨率 众所周知，分辨率越大那么画面质量就越好，一般来说，目前的显示器达到了21.5英寸，那么普遍显示器的分辨率基本是1920*1080（1080P），属于目前市场主流分辨率，通常来说，27英寸以下的显示器能够达到1080P足以，画质基本可以保证。 显示器分辨率 如果对分辨率要求较高的朋友，例如2K分辨率，建议使用27英寸或以上尺寸的显示器，低于27英寸不但预算会额外增加，实际效果体验还不是太明显。尤其是32英寸或者以上尺寸的显示器，分辨率至少需要达到2K级别了，不然画面会有明显颗粒感，当然我们选择2K分辨率，如果游戏的话，还需要考虑显卡是否可以支持。 2、显示器面板类型 目前市面上十分常见的显示器面板类型有三种，分别是IPS、VA、TN。