文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

这是因为，在小屏规格范围内，无论屏幕尺寸如何变化，拇指热区基本都能保持相似的形状及位置，而一旦屏幕尺寸突破了某个临界值，人们通常需要将小指从屏幕下边缘移至机身背后，使其与另外三根手指一起托住手机才能保持稳定...在平板手机上，仍然需要将导航及高频功能控件放置在屏幕底部。无论用户怎样持机，平板手机的屏幕顶部区域总是相对难以触及。...我总会在用户研究中观察到这样的现象：对移动设备上的网页，除非用户在主要内容区域实在无法找到自己需要的信息，否则他们几乎不会想起主导航。...在尺寸方面，要尽可能使元素的宽度达到屏幕宽度的三分之一以上，最好可以接近屏幕宽度，从而最大程度降低拇指操作的费力度。 不要随着屏幕的增大而放大手势操作的触发区域。...实际上，这种模式相当于临时把大屏手机缩小了。虽然操作便捷了很多，但经常这样使用又显得很尴尬——既然大屏无法得到充分利用，当初何必要购买这样的设备呢？ iOS则采用了一种称为“触达性”的设计模式。

2.4K10

一个emoji引发的思考

/blog/2014/12/unicode.html 所以emoji作为unicode，那在计算机上是怎么显示的？...人为可以轻松识别一个泰文是否拼写正确，但是计算机在显示时就很难判断。 像泰文这种特殊合成字符的本质，你无法避免人们在计算机上都会有哪些奇妙的创造。...切图是UI给的以iphone6的屏幕宽度为准的750px2倍视觉稿，组内方案选择参考了手淘的flexible。具体原理和这次主题无关，我就不在这里阐述了。...最先想到的是，我的emoji在输入框里面，设置了font-size，这个font-size的值是rem, 那会不会是某些安卓系统emoji对rem支持不好？于是我换成px，依然如此。...实际上，只设置initial-scale=1，我们也能把当前的viewport宽度变成ideal viewport的宽度（这里不考虑iphone下不同dpr的缩放），因为这个缩放就是相对于ideal viewport

1.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

    名词解析 在之前写过的 AndroidUI设计之 布局管理器 - 详细解析布局实现 中的 第七 小节已经说明了一部分; (1) 通用名词 屏幕尺寸(screen size): 按照屏幕的对角线测量的实际大小...; --注意 : 分辨率不等于屏幕宽高比, 在Android程序中尽量避免直接使用px; 像素(px) : 实际的分辨率, 例如在 320 * 480分辨率手机上, 320 和 480 就是像素点; 分辨率...sp 作为单位; px与dip区别: 下面的情况是以屏幕尺寸不变为前提的; -- px绘图 : 在320像素宽的手机上, 100px的长度 是 480宽度像素手机上长度的 2/3; -- dip绘图...: 屏幕大小不变的情况下, 100dip 在320 480 像素手机上实际尺寸长度是一样的; px与dip, px与sp之间转化工具类 :  public class DisplayUtils {...中从DisplayMetrics中获取的density 和 densityDpi 就是归一化密度; -- 固定值 : 归一化的密度是有固定值的, 这个固定值是 120dpi(ldpi) , 160dpi

    67520

    Android技能树 — 屏幕适配小结

    （其实很多人都是看见别人写的适配方案，虽然可能实际在使用了，但是却从来没有去了解过这个方案的原理,而且遇到一些简单的坑的时候，因为不知道原理，也无法自己解决。）...Button宽度为父布局的百分之50，则在不同手机上，都是占据了百分之50。...： 因为要动态获取父控件的控件，同时把新的值赋值给子控件，所以该行为在onMeasure方法中执行。...然后在不同手机上动态的计算出来数值，是不是感觉和百分比布局有点相似。...但是万一1280X 720的手机的density是3呢，则宽度为240dp, 这时候设置成180dp，实际的px值为： 180 * 3 = 540px ，但是我们想要的是360px ，也就是 180 *

    87930

    Android全面的屏幕适配方案解析(二)

    相对应的Android推荐使用dp作为尺寸单位来适配UI，之前我们讲过，dp为密度无关像素，与终端上的实际物理像素点无关，可以保证在不同屏幕像素密度的设备上显示相同的效果。...，分别对应的1.5px、2px、3px，这样当我们用dp作为控件大小单位的时候，在不同分辨率的手机上看到的大小一样，此时各手机上显示的比例也就一致啦。...，屏幕尺寸为5，那么dip为440，假如UI设计图按屏幕宽度为375dp设计，那么这样会存在啥问题呢？...根据上述描述，我们可以通过计算出屏幕宽度为：1080/(440/160) = 393dp，也就是说实际的屏幕宽度是比设计图的要宽的，那这样即使用dp为单位也无法跟其它设备显示同样的效果，这就需要通过估算或者设定规范值等等进行换算设置...1、分析需要的支持的分辨率 对于主流的分辨率已经集成到程序里了，对于比较特殊的可以通过参数指定，而关于屏幕分辨率信息，可以通过该网站查询：点击这里跳转 2、自动生成文件的程序地址 点击这里跳转获取自动生成程序

    1.1K30

    QQ天气H5-前端完整解析

    并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。 ? 在开发手Q天气的时候，学习到许多，发现有许多地方值得写一下。以下是我的总结。...，只需要把常用的屏幕宽度考虑进去即可 /*默认为20px*/ html { font-size : 20px; } /*判断宽度设置不同的html font-size值去覆盖默认值*/ @media...手Q天气的使用 如下面这样的布局整个div分成5个部分，每个部分占据同样的宽度。 ? 上面的html结构如下 ?...会有不同的宽度而导致不均分 如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题 ---- HTML5 canvas 我们可以看到在页面中带有温度折线图以及下雪下雨的动画...的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊

    2.2K30

    QQ天气H5-前端完整解析

    并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。 ? 在开发手Q天气的时候，学习到许多，发现有许多地方值得写一下。以下是我的总结。...，只需要把常用的屏幕宽度考虑进去即可 /*默认为20px*/ html { font-size : 20px; } /*判断宽度设置不同的html font-size值去覆盖默认值*/ @media...手Q天气的使用 如下面这样的布局整个div分成5个部分，每个部分占据同样的宽度。 ? 上面的html结构如下 ?...会有不同的宽度而导致不均分 如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题 HTML5 canvas 我们可以看到在页面中带有温度折线图以及下雪下雨的动画...的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊

    2.8K101

    你手机的电都去哪儿了？

    下面写一个普通的APP执行斐波那契数学计算，并控制CPU占用率在特定值，比较一下电量的消耗情况，统计结果如下： ?...Screen 目前主要有两种屏幕，IPS屏和三星主推的AMOLED屏，屏幕的亮度对整机耗电影响较大，这个众所周知的，现在很多手机的屏幕亮度是通过光传感器自动调节的，但对手游来说屏幕亮度是其无法控制的，所以这里不作讨论...我制作了5张纯色图片，分别是：黑、红、绿、蓝、白，然后从全民飞机大战和雷霆战机上分别截取了排行榜的屏幕截图： ?...AMOED屏幕的耗电量是与显示色彩是有关系的，而且在两个极端的情况下差距还不小，纯黑和纯白相差了150mA，但是实际游戏中不可能有这种极端情况，全民飞机大战的色彩偏亮，而雷霆战机色彩偏暗，显示两个截图屏幕耗电量相差大约...考虑到AMOLED屏幕在纯白色的情况下，耗电还是比较厉害的，游戏的色彩上也可以加以关注。 想了解你的手游有多耗电吗？

    2K30

    移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo

    移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思 在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植...也就是说,不管你的手机屏幕是多大,屏幕分辨率是多少,都能在页面上完整的还原设计稿. 也就是说,要求就是,大手机上,看着每个元素,包括文字都要大一些.而在小手机上,看着要小一些.全部都整体缩放呢?...720或者640或者1080来进行实际的计算....这个计算公示如下: 数值/比率=需要的rem值 思路收回来一下,这个rem值是什么? 这个rem值是设计稿上的一个宽度,如设计稿宽度是720.对应在代码中,应该转化为多少rem值....首发地址:http://blog.csdn.net/FungLeo/article/details/51177863 修正一 一开始,我使用的是获取屏幕宽度的方法,为screen.width这在大部分的手机上都没问题

    1.2K10

    小程序Canvas实践指南

    微信开放社区有人提问，为啥我做了如下设置，在模拟器上可以加粗，安卓机上加粗却没有效果。...我猜，还会有人问，为啥设置了安全域名后，在真机上还是无法显示绘图。这里需要考虑图片加载的时间，如果图片还未加载就开始绘制，那么就会报错。...一张 100x100 像素大小的图片，在此屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在此屏幕上实际会占据 200x200 像素的空间，相当于图片被放大了一倍，因此图片会变得模糊...前面也提到过，CSS 动画在真机上会偶现 闪烁和 抖动现象， wx.createAnimation和 this.animate在部分 iphone 机型中无法获取动画周期，页面偶现 闪烁现象,比如一个动画周期是...canvas 2d 在 ide 上的表现效果等同于原生组件，仍然会“透出”。需要在真机上查看实际的效果。 canvas 标签默认宽度 300px、高度 150px。

    3.7K53

    AndroidAutoSize开源库屏幕适配分析

    （Star: 4329）； 通过修改Application/Activity等的DisplayMetrics中核心数据，使得在不同分辨率手机上对应的dp相等而达到每个显示的View占用屏幕的比例相同。...dp 与dip雷同，指的是设备独立像素，在不同分辨率和尺寸的手机上代表了不同的真实像素，计算公式：px = dp(dpi/160) dpi 像素密度，指的是在系统软件上指定的单位尺寸的像素数量，它往往是写在系统出厂配置文件的一个固定值.../160) = 360 dp 可以看到屏幕的总 dp 宽度在不同的设备上是会变化的，但是我们在布局中填写的 dp 值却是固定不变的，这就导致我们设置的固定宽度在不同的设备上显示的比例不一样。...方案二： 每个View设置固定的dp值，通过修改density 值而达到每种分辨率手机的宽度dp值相同 由公式：dp = px/density 可知，由于px是屏幕分辨率，这个值有硬件确定，我们是无法改变的...计算出的结果（上面模拟器参数是我特意设置，为了很明显的演示所需） ， 因此在大多数设备上对View的宽/高设以dp为单位进行设置值，差别并不是十分大，当然这只是大多数设备，因此要适配每种设备还是很难做到的

    4.8K41

    再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetXTop,clentX

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)...event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。...因为滚动条不会出现在顶部或者左侧 offset 指偏移，包括这个元素在文档中占用的所有显示宽度。比client 多了border。     ...scroll指滚动，包括这个元素没显示出来的实际宽度，包括padding，不包括滚动条、border     scrollWidth 获取对象的滚动宽度，对象的实际宽度；     scrollHeight...如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值

    1.5K20

    Android 目前最稳定和高效的UI适配方案

    首先，大家都知道，在标识尺寸的时候，Android并不推荐我们使用px这个真实像素单位，因为不同的手机之间，分辨率是不同的，比如一个96*96像素的控件在分辨率越来越高的手机上会在整体UI中看起来越来越小...dpi是像素密度，指的是在系统软件上指定的单位尺寸的像素数量，它往往是写在系统出厂配置文件的一个固定值。 我为什么要强调它是软件系统上的概念？...第二个问题，这种方式无法快速高效的把设计师的设计稿实现到布局代码中，通过dp直接适配，我们只能让UI基本适配不同的手机,但是在设计图和UI代码之间的鸿沟，dp是无法解决的，因为dp不是真实像素。...指的是Android会识别屏幕可用高度和宽度的最小尺寸的dp值（其实就是手机的宽度值），然后根据识别到的结果去资源文件中寻找对应限定符的文件夹下的资源文件。...原生的dp适配可能会碰到Pixel 2这种有些特别的手机需要单独适配，但是在smallestWidth适配中，通过计算Pixel 2手机的的smallestWidth的值是411，我们只需要生成一个values-sw411dp

    1.4K20

    企鹅FM点歌台总结

    目前是没有发现什么性能上的问题，但是不知道会不会遇到 stackoverflow 之类的问题。当一直停留在这个页面上，不断进行计算，我怀疑会不会出现数位不够，无法继续往下计算的状况。...获取屏幕宽度，.slider-wrapper 还是需要内联样式：width: 屏幕宽度 这里获取屏幕宽度，要注意使用的方法，安卓可能获取到的是实际像素（就是物理像素*ratio），导致显示不正确 setInterval...要注意获取屏幕宽度的方法，用 screen.width() 在安卓上会得到实际像素（比如魅族MX4，就会得到1080px），如果要使用这个方法，获取屏幕宽度是不可以的，可以获取视口宽度 因为 li.banner...是用绝对定位写的，在移动的过程中 left 的值还在改变，所以在计算 translate 的时候，在部分安卓机上 webview 会有问题，轮播不会通过流畅的动画切换，而是轮播区域黑一下，再闪现下一张...不过万一出现键盘很高，占了屏幕的 2/3，所剩区域本来就不多，偏偏 top 值又定的很大，输入区域直接掉出了页面…那也是没sei了。

    1.5K40

    JS:用rem来做响应式开发

    电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。...所以body默认宽度是屏幕宽度 （PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。...（你还可以设置更多节点） 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围； 3.还有就是css3的单位rem： rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置最大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...的font-size最小值为10px;在小于这个值就不会再小了，这是我当时碰到的问题花了快两个小时上网找，一遍遍演示也都没想明白，最后终于查到这么个非人为原因.

    6.2K10

    实用Android 屏幕适配方案分享

    第三、android系统自己去找相应资源目录下的  dimens.xml文件，从而获取最合适的值。这一步，不需要你的参与。 OK，完成。... ，在实际使用中1dp 大约 等于1/160inch。...比如，我现在以下几个需求： 对于图片展示的Banner，为了起到该有的效果，我希望在任何手机上显示的高度为屏幕高度的1/4 我的首页分上下两栏，我希望每个栏目的屏幕高度为11/24，中间间隔为1/12...再比如：我的某个浮动按钮的高度和宽度希望是屏幕高度的1/12，我的某个Button的宽度希望是屏幕宽度的1/3。...假设我现在需要在屏幕中心有个按钮，宽度和高度为我们屏幕宽度的1/2，我可以怎么编写布局文件呢？

    1.2K100

    将 UWP 的有效像素（Effective Pixels）引入 WPF

    在非 PC 设备（手机、平板电脑、大屏幕电视）上，如果依然保持物理尺寸相同，那么 PC 上显示合适的 3cm 的按钮在手机上将占据大半个屏幕，在电视上将小得几乎看不见。...用户可以随时修改屏幕显示分辨率，修改系统或屏幕的 DPI 值。在显示分辨率与显示器实际物理分辨率不一致的情况下，用户还能设置画面的填充方式（居中或是拉伸）。...给有效像素下个定义 结合微软对有效像素的愿景，结合实际情况，我认为“有效像素”的定义应该是这样的： 在理想状态下，1 有效像素等于用户观看距离 50cm 时，观看屏幕上 1/96 英寸的物理距离所对应的视角大小...DPI 值设置为 96，则它的物理宽度是 1 英寸 DPI 值设置为 144，则它的物理宽度是 1.5 英寸 DPI 值设置为 192，则它的物理宽度是 2 英寸 在以上情况下，如果 DPI...谈显示器像素个数： 用户使用了最佳分辨率 在 DPI 值为 96 时，显示完按钮宽度所用的屏幕像素个数为 96 DPI 值设置为 192 时，则显示完按钮宽度所用的屏幕像素个数是 192 在以上情况下

    1.5K21

    浅谈移动端中的视口（viewport）

    在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。...显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。 理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。...用下面的方法可以使布局视口与理想视口的宽度一致： "viewport" content="width=device-width"> 实际上，这就是响应式布局的基础。...当设置屏幕分辨率为 1920px1200px 的时候，理想视口的宽度值是 1920px， 那么 dip 的宽度值就是 1920px。

    2.3K20

    面试官：你了解过移动端适配吗？

    知道什么叫做分辨率后，有人就会奇怪，我记得苹果的苹果官网上的苹果6的分辨率为750x1334啊，但是设计稿上苹果6的分辨率为375x667啊,而且各个设备的分辨率都比实际分辨率小很多，这就牵扯到一些历史原因了...从蓝屏手机，到彩屏手机，到诺基亚研发出来触屏手机，再到智能手机一步步发展下来，我们的我们的手越来越清晰，越来越大，所以我们的屏幕发展也越来越迅速。 ?...来帮助我们获取dpr。...那么所谓的理想宽度就是浏览器（屏幕）的宽度了。 于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！...屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

    1.4K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券