设备的屏幕像素比 屏幕像素比（Device Pixel Ratio ，DPR），实际上指的是window.devicePixelRatio ,被所有webkit浏览器以及opera所支持， 它是一个比值...其实就是用物理设备的像素/css像素。 举例来说：假如一个手机的像素是640x960而css像素为320x480，那么它的屏幕像素比为2。...在浏览器中的Console中可以查看当前网页的屏幕像素比。 在Console中输入window.devicePixelRatio即可查 那么屏幕像素比的含义是什么呢？...下面来简单分析一下 例如在retina屏幕中(视网膜显示屏，一种新型高分辨率的显示标准)，DPR=2，意味着1个css像素用2x2个物理设备像素来绘制。 为什么是2x2呢？...那么屏幕像素比有什么意义呢？ 他能使页面更细腻的显示在一个高清分辨率的屏幕当中。
根据设备配置信息 Configuration cf= activity.getResources().getConfiguration(); // 获取设置的配置信息 int ori = cf.orientation...处理Activity的配置变更 有些设备配置可能会在运行时发生变化（例如屏幕方向、键盘可用性及语言）。 发生这种变化时，Android 会重启正在运行的 Activity。...重启行为旨在通过利用与新设备配置匹配的备用资源自动重新加载Activity，来帮助它适应新配置。但重启Activity并恢复大量数据不仅成本高昂，且用户体验差。...- 用户旋转了设备。...(目标API>13时必需) 参考：https://developer.android.com/guide/topics/resources/runtime-changes.htmlAndroid设备屏幕方向的一二事
如下图： pt也称逻辑像素点，px物理像素点，1pt等于2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同设备分辨率下自行转换； PPI=物理像素开根号.../屏幕尺寸（对角线） 移动设备中，设计师一般给物理分辨率（物理像素点），而页面渲染（或微信小程序）是逻辑分辨率
表格 image.png 理解 屏幕尺寸：是对角线的距离 pt： 逻辑分辨率 只和屏幕尺寸有关系，是长度和视觉的单位 px： 物理分辨率，1个px是一个物理像素点，和屏幕大小没关系，不是一个长度单位...Reader：1pt 下包含 Reader 个 px 1个逻辑分辨率下由reader个像素点构成 Reader @2X 已经达到人类视网膜的极限，再增加也不会有好的视觉效果 PPI：每英寸包含多少个物理像素点...计算公式：勾股定理 分辨率平方开根号/屏幕尺寸 总结： Iphone6（现在大部分设计图都是在Iphone6下进行换算的）下2个px构成一个pt 如何做不同分辨率设备的自使用？...# 以iphone6的物理像素750x1334为视觉稿进行设计，而在小程序中使用rpx为单位 # iphone6下 1px=1rpx=0.5pt # 使用rpx，小程序会自动在不同的分辨率下进行转换，而使用...px单位则不会 为什么要用iphone6的物理分辨率来做设计设计图 iphone6下 1px = 1rpx (好计算) iphone6 plus下 1px = 0.6rpx
大家好，又见面了，我是全栈君 iPhone4尽管是640px解析度，但它的屏幕宽度（device-width）目前只有320px和iPhone3G相同。只是iPhone4S的像素密度2。...假设你要检测的高像素密度的设备。...以下的类似CSS声明： @media screen and (-webkit-device-pixel-ratio: 2) { body{ background-color: red;
诞生史 在 2007 年，苹果公司发布首款 iPhone 之前，由于当时的网站普遍为大屏幕设备所设计，为了应对 iPhone 这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体...于是，单击事件延迟成为了移动开发者不得不面对的痛。...没有其他浏览器供应商宣布要添加此优化的计划。尽管此解决方案非常巧妙，背后却以牺牲整个页面缩放为代价，带来的影响是对于页面上的图像或小文本，想要进行缩放变得难以完成。...; } 甚至可以添加 touch-action: none 到 body 以完全禁用双击来缩放（注意：这也将禁用双指缩放功能，因此它与我们前面讨论的与禁用缩放相关的可访问性和可用性问题相同）。...任何其它被 touch-action: auto 支持的行为不被支持。启用平移和双指缩放手势，但禁用其他非标准手势，例如双击缩放。 禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。...但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。...通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。...query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。...目前像Bootstrap等框架使用这种方式布局 图片便于修改，只需修改css文件 调整屏幕宽度的时候不用刷新页面即可响应式展示 缺点 代码量比较大，维护不方便 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费
不出意外，明年将会迎来OLED屏幕的大爆发，国内手机厂商必然会跟风而上，一旦OLED屏幕在市场大面积铺开，对于移动VR来说，或许将预示着一个新的爆点的产生。...其中，三星抢占了大部分移动智能手机的OLED屏幕市场，国内的vivo和oppo的OLED屏厂商都是三星。...移动VR和OLED，不是对方的充要条件 这也是现在国内手机厂商做移动VR的同时，为什么没有选择先去升级配套手机的屏幕的原因。...因为对他们来说，移动VR只是手机的附加物，所以OLED屏幕厂商也不要指望着移动VR能够给OLED屏带来多大突破。 而且尽管OLED屏幕和移动VR相辅相成，但它还不是移动VR的“救命稻草”。...OLED屏幕的大面积铺开不代表着移动VR的体验会提升到一个“完全沉浸式无眩晕”的层次。 OLED屏幕的未来就在这几年，但是移动VR真正的发展高潮点可能要比它迟一点。
uuid: 设备的唯一标识，调用此属性获取设备的唯一标识号。 平台支持：Android - 2.2+ (支持): 与设备的imei号一致。...iOS - 4.5+ (支持): 根据包名随机生成的设备标识号。注意：在设备重置后会重新生成。 ? 移动设备（手机）的唯一ID有哪些 在移动广告领域，设备的ID 是用来追踪一个人的最重要的标识。...对于与外部数据打通而言，移动设备ID 是能与公司外的数据进行打通、交换、补充的唯一性ID，也是市场上大家都认可的ID。...既然移动设备ID 如此的重要，那我们就来聊一聊，有哪些ID我们是可以使用的： 一、IMEI IMEI是国际移动设备识别码，一串15位的号码，每部通过正规渠道销售的GSM手机均有唯一的IMEI码。...二、IDFA 苹果和Google针对移动设备推出的 广告标识符 1、IOS体系下：可以获取 在IOS6.0以后版本均可以正常获取IDFA，但手机用户可以手动还原 以及 手动禁止获取（手动关闭广告追踪，
目前在使用的大屏幕 Android 设备超过 2.5 亿，所以这就需要应用针对这类设备进行相应的适配。...12L 包含多个专门针对开发者的优化，包括更出色的多任务处理，重新设计的外观以充分利用屏幕空间，同时还增加了兼容模式，以确保在小屏幕手机上也可以正常运行。...该功能让您能够利用现有应用结构来优化大屏幕布局。而且最令人兴奋的是采用该功能只需略微调整代码，某些情况下代码甚至无需调整。 △ 小屏幕和大屏幕 我们来详细看一下。该功能在设计之初就考虑到兼容性。...兼容性模式 △ 兼容性模式 在大屏幕平板电脑 Chromebook 或外接显示器上运行仅针对小尺寸竖屏 Android 手机设计的应用时，如果拉伸进入全屏视图，那么应用外观和性能可能会差强人意。...像平板电脑和可折叠设备一样，Chrome 操作系统现在也有了兼容模式，针对小屏移动设备设计的应用可在手机尺寸或平板尺寸的窗口中显示。
介绍 在我学习android开发的时候，觉得设备适配是件很头疼的事情，android的设备太多了，那时就很羡慕iOS开发的人不用操心适配的问题，而当我开始学习iOS开发后，iOS的屏幕也开始多种多样了起来...之前也研究过，这里把我的方法记录下来，本文介绍三个常用的设备信息获取方式： 获取屏幕的宽高。用于在设置控件位置的时候计算相对屏幕的距离 获取设备的型号。...就是（屏幕的宽度 - 200）/ 2了对吧，这样就可以保证不管在什么设备上它永远是居中的。...获取屏幕宽、高的方法如下： // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]...我们先看下面这张表： 关注设备分辨率那一列，我们可以看到几款屏幕的设备的分辨率是不同的，因此也就可以以此为依据判断设备型号，我这里判断了几种当前最常见的型号，同样使用了宏： // 根据屏幕分辨率判断设备
上次转载了一篇《将你的网站打造成一个iOS Web App》，但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误，只是不适合自半年前来的情况了（也可以说是iOS7 之后的时间）——话说现在的的移动设备真是日新月异...好了，结合Jeff 查阅的资料，下面来详细来说说iOS / Android 移动设备中的 touch icons。 关于 “Touch icons” favicons 知道是什么吧？...浏览器的tab 前面的那个小图标，放入某个网站到收藏夹的时候也会看到，这个可以说是pc 互联网的产物了。而Touch icons 则是移动互联网的产物，用于手机、平板等移动设备上。...，Chrome v31+ for Android 以上的版本支持这个；但遗憾的是，苹果的设备不支持这个。...不同的Touch icons 尺寸 （接下来讲的基本上是apple 的设备）考虑到不同设备的分辨率以及屏幕材质的问题，为了最佳的显示体验，你可以用sizes标签定义下，如： <link rel="apple-touch-icon-precomposed
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。...浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 ...原理就是： 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕， 用离开的时间减去触摸的时间 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击 代码如下: //... }); obj.addEventListener('touchmove', function (e) { isMove = true; //...看看是否有滑动，有滑动算拖拽，不算点击 }); obj.addEventListener('touchend', function (e) { if
移动端click事件会有300ms延时，原因是移动端屏幕双击会缩放页面。...三种解决方案如下： 1.禁用缩放，浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟 2.利用...原理就是： 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕，用离开的时间减去触摸的时间 如果时间小于 150ms，并且没有滑动过屏幕，那么我们就定义为点击 //封装tap,解决click300ms...", function (e) { startTime = Date.now(); //记录触摸时间 }); obj.addEventListener("touchmove", function...(e) { isMove = true; //看是否有滑动，有滑动算拖拽，不算点击 }); obj.addEventListener('touchend',function(e){
1.click 延时解决方案 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。...浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。...原理就是： 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕， 用离开的时间减去触摸的时间 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击 代码如下: //...}); obj.addEventListener('touchmove', function (e) { isMove = true; //...看看是否有滑动，有滑动算拖拽，不算点击 }); obj.addEventListener('touchend', function (e) { if
注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault(); 1.2. 移动端常见特效 1.2.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。...; // 让当前索引号 的小li 加上 current add ol.children[index].classList.add('current'); 手指滑动轮播图 本质就是ul跟随手指移动，简单说就是移动端拖动元素...e.preventDefault(); // 阻止滚动屏幕的行为 }); // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张 ul.addEventListener('touchend...('click', function() { window.scroll(0, 0); }) 1.4. click 延时解决方案 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放...解决方案： 1、禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件，可以调用 event.preventDefault...不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。...它非常小，非常适合移动端。 Zepto.js的touch模块中封装了手势相关的代码。
3部分 1、什么是滚动穿透 2、为什么会滚动穿透 3、怎么解决滚动穿透 4、碰到的问题 什么是滚动穿透 大家肯定不陌生了，做移动端开发的，肯定都碰到过，比如 我明明滚动的是弹窗，但是底下的 document...，我在需求的小活动页7就使用过这种方式 5禁用页面滚动 除了在 css 限制页面滚动，还可以从 js 去限制 document.addEventListener( 'touchmove', e => e.preventDefault...()); 这里要注意一个问题，在 chrome51 中在监听回调更新了参数，如果你不加上这个参数，那么可能这样并不能禁用页面滚动 具体如下 以前 addEventlisener 参数 是 target.addEventListener...写的文章 https://zhuanlan.zhihu.com/p/24555031 所以我们禁用页面滚动，可能得这么写，告诉浏览器我们需要禁用滚动 document.addEventListener...3滚动穿透的触发条件 一次没有抬起的滚动行为（手没有离开屏幕）导致元素滚动到顶部或者 底部之后，如果手还在屏幕上往两端滑，并不会触发滚动穿透 如果你把元素滚动到 两端不可滚之后，抬起手，再按下去，往不可滚的方向移动
翻译整理自: simpleisbetterthancomplex.com Migrations 无疑是 Django 的一大特色功能，当它在单元测试的时候， 却会加长整个单元测试的时间。...特别是你的migrations history特别的大.本篇是加快单元测试的小技巧: 为单元测试单独创建一个 settings tests_settings.py Python from settings...--verbosity=1 Django >= 1.9 使用MIGRATION_MODULES设置项, 用于定义migration模块的自定义名称， 如果为None则是忽略此模块....'profiles': None, 'snippets': None, 'scaffold_templates': None, } Django < 1.9 如果是1.9之前的版本...(使用: South) Raw SOUTH_TESTS_MIGRATE = False 这个可以写在生产的settings.py中.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
