方式一：用媒体查询"@media"，这种写法好处是可以对不同分辨率的设备，展示完全不同的UI界面，一个页面不同的设备看的时候，展示内容可以不一样，交互方式可以不一样。不过这个不方便用在复杂的地方，而且不同的分辨率都需要对应的重新写样式，同一个页面集合太多的这种写法，最好是分开写两套，降低耦合性。但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。
所见不一定即所得 眼睛是心灵的窗户，也是蒙蔽你的一种途径。 假设，我给你一张图片，你觉得肉眼可以观察到全部的细节吗？ 屏幕上一张清晰的图片 肉眼在屏幕上看到图片的清晰度由三个因素决定，一是图片像素本
劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非wifi情况下即使加了延时加载也易出现加载慢的情况。
本文主要介绍了响应式设计的入门知识，包括媒体查询、弹性图片和弹性字体、媒体类型、断点、响应式图片、响应式布局、设备像素比、浏览器兼容、媒体查询的兼容性等。
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parseInt(window.screen.height); 4 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 5 var ua = navigator.userAgent; 6 if (/Android (\d+\.\d+)/.test(ua)
今天要介绍的是 Github 上一个基于深度学习的超分辨率工具--SRZoo，并且它还提供了多个预训练模型。Github 地址：
Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目.
同一套页面可以兼容不同分辨率的设备，Bootstrap的响应式布局依赖于栅格系统实现，将一行分为12各格子，通过指定控件在不同分辨率设备上所占各自的数目实现兼容
简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放2个Div。 到了手机上，或者Pad竖着拿的的时候，一行就只放1个Div。 这里有2个关键点： 一
开启进房权限的目的是为了避免非会员模式能够进入高级房间，同时解决客户端限制被破解的问题。目前进房权限在iOS、Android、Windows、Electron、微信小程序和Chrome 浏览器都支持。
影响相机画面效果的因素有很多，分辨率就是其中一个因素，1080p和720p的效果对比，画面清晰度等差别还是挺大的。
目前使用这种方式，只能设置显卡列表支持的分辨率，不支持自定义分辨率。不知道有什么更好的方式，有知道的大牛给指导下。
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开
作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用，可以针对
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
作为一个测试工程师，经常被一些难以复现的bug困扰很久，理论上不可能出现，但线上确实又有很多用户反馈，比如小编前段时间碰到了一个比较有意思的bug，涉及到一些Android版本变更引发的问题，在这里和大家分享一下：
今天学习了调用电脑摄像头，利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入，产生包含所请求类型的媒体轨道。包括视频轨道（由诸如照相机，视频记录设备，屏幕共享服务等的硬件或虚拟视频源产生），音频轨道（类似地，由物理或虚拟音频源，如麦克风，A / D转换器等），以及其他可能的轨道类型。
由于手机屏幕尺寸过小，使用原始分辨率会使得页面显示过小，因此使用了逻辑分辨率，用倍数放大的方法来保证兼容性。
最近封装了个高斯模糊组件，正好将图片相关的理论基础也梳理了下，所以，这次就来讲讲，在 Android 中，怎么计算一张图片在内存中占据的大小，如果要优化，可以从哪些方向着手。
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
实际工作中，我们经常会向其他同事咨询一些技术问题。但是，他给出的答案一定是正确的吗？
ATX: AutomatorX简称,本文主要讨论的iOS自动化测试的框架 WDA: WebDriverAgent的简称，是Facebook为苹果开发的一个自动化测试框架 优点(对比Appium) 引用作者原话:
响应式的蜕变 Ctrip Tech 本文不再从最基本的语法开始行文，而在列举一些最基本的信息之后，开始探讨传统响应式设计的问题，与在实践当中思考出来的改进方法，从而实现一次次的蜕变。 目前为止，平台众
以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已 知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面 这些烦恼，且开发效率快和维护成本会降低很多。 答案是有的，而且这种形式最早出现于 flash 全屏整站，前阵子拜读了举总介绍的一篇文章关于图
1. 引言 Windows Phone 7平台只支持WVGA分辨率（480*800）的设备，这对于应用程序的UI设计来说是有利的，因为设计人员不用考虑多分辨率对UI控件布局的影响。但是，Windows Phone 8平台打破了这个局面，支持三种分辨率，分别为WVGA、WXGA（768*1280）和720p（720*1280）。随之而来的问题就是，开发者该如何应对多分辨率对应用程序的影响？这仿佛又把我们带回了Windows Mobile那个多分辨率的时代。那个时候，我们的应对方法就是使用控件的Dock
以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已 知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面 这些烦恼，且开发效率快和维护成本会降低很多。 答案是有的，而且这种形式最早出现于 flash 全屏整站，前阵子拜读了举总介绍的一篇文章关于
--------------- iPhone ---------- -------- iPad ------------
在设置视频分辨率的时候需要注意要销毁掉已经存在的媒体流后重新使用新的约束的获取媒体流数据：
说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不同的移动端设备。简单点说，我想知道怎么获取设备的真实开发尺寸（根据这几天查资料所得，这个概念叫逻辑像素）。
我们常说的指纹，都是指人们手指上的指纹，因具有唯一性，所以可以被用来标识一个人的唯一身份。而浏览器指纹是指仅通过浏览器的各种信息，如CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件等组合成的一个字符串，就能近乎绝对定位一个用户，就算使用浏览器的隐私窗口模式，也无法避免。
公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。之前团队还未接触过手机应用的页面重构工作，这次由我打头炮，搭建这款webapp的基本页面样式框架。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
这周末闲来无事，整理了下虚拟显示器的源码，发现有几个项目都用到了，但是使用的功能不尽相同： （1）最简单的运用仅仅是需要显示器的拔插； （2）稍微复杂一点的是需要设置显示器的分辨率，包括标准的分辨率，如19201080，还包括非标准的分辨率，如1120900； （3）再复杂一点的需要设置显示器名称、刷新频率、获取虚拟显示器屏幕图像信息。 再观察我的那几个项目，都重复的导入了源码，每次发现一个bug，改了一个，另外一个忘记同步了，造成代码维护的不便，所以此次将虚拟显示器部分的代码进行提取，单独封装成一个SDK，只要项目中有用到都使用这个SDK即可。
在一些低端机型,或者定制设备上,会出现硬编硬解黑屏/绿屏,有一种情况就是因为设备自身的编解码器分辨率不支持设置的分辨率导致的,此时需要去获取下设备的支持分辨率来验证是否是该问题导致的
一、背景 随着近些年屏幕设备的不断发展，各种显示设备的分辨率也越来越高，在尺寸保持基本不变的情况下，分辨率越高，设备的DPI也越高，清晰度也就越高。高DPI的设备给我们提供了更精细的画质，然而Windows上的大多数应用并没有适配高DPI的显示器，导致应用在这些设备显示模糊，体验非常差。 为了让应用在高DPI的设备上依然显示清晰，我们就需要对高DPI的设备进行适配。 二、基础概念 2.1 DPI是什么 DPI是Dots Per Inch的缩写，表示显示设备在每英寸上有多少个像素点。在开发过程中，
目前在为移动设备设计界面时，最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计，因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后，这将有助于我们进行更好的设计。
Android 可设置为随着窗口大小调整缩放比例，但即便如此，手机程序设计人员还是必须知道手机屏幕的边界，以避免缩放造成的布局变形问题。
小编这次分享主要是视频相关的专项测试，音频相关的暂不涉及。 我们直接切入正题，关于视频通话质量对比，需要一些对比项，这里是从以下5个方面进行数据对比：码率、帧率、分辨率、清晰度、时延。 接下来我分别介绍一下这5个方面。 ▽ 码率 数据传输时单位时间内传送的数据位数，单位是kbps，即千位每秒。码率越高对应着传输能力越强，视频精度会越高。 帧率 帧率是用于测量显示帧数的量度，简称fps。每秒的帧数表示处理器处理时每秒钟能够更新的次数，高的帧率可以得到更流畅、更逼真的动画。 分辨率/清晰度 这个两个指标代表着
前面我们已经学习过在web端用TRTC实时音视频SDK实现了多人会议室和互动直播模式，今天我们学习一下在桌面应用层用electron实现视频聊天。
右边则是工程代码编写的地方，pages目录下存放着所有页面相关的文件或目录，index目录和logs目录就代表着以上的两个页面：
由此可见，只有iPhone4和iPhone4s和iPhone5及以上设备的长宽比不一样，可以粗略认为iPhone5、5s、6、6+的长宽比是一样的，可以等比例缩放，虽然有细微的差别，基本上看不出来。
在我学习android开发的时候，觉得设备适配是件很头疼的事情，android的设备太多了，那时就很羡慕iOS开发的人不用操心适配的问题，而当我开始学习iOS开发后，iOS的屏幕也开始多种多样了起来...于是也得做适配了，sad...
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？
【设计日记】是腾讯FiT designer的短平快设计思考。在这里你可以看到设计师的一些日常活动，对工作、对设计的一些个人感悟或者小思考，还能发现FiT designer工作生活中的创意活力。 FiT金融市场部 页面重构组 joinli nekozheng huayudeng terryqin 视频H5具有很强的视觉冲击力和感染力，能给用户传达更丰富的画面信息，在近段时间被广泛应用。 鉴于移动端环境复杂多变，H5的用户体验将影响传播效果，因此视频H5的可访问性尤为重要，做到本文所提到的以下几点，会
前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前，需要先对几个概念进行普及介绍
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
