原文:
http://xuui.net/ui-design/retinal-display-to-optimize-the-image-the-on-the-the-page.html
iphone和ipad都存在两种屏幕,一种是普通屏,另外一种retina屏。也就是视网膜屏。retina屏的分辨率是普通屏的两倍,在ios原生应用。只要准备两套图片,系统即可自动识别在什么屏幕下显示大图或者小图。但是在webview中html所包含的图片。却不能自动识别。
然后很多人可能说用css中@media query不就行了。。。经本人验证。不起效果。。。。很诡异的是我在ipad模拟器中用safari打开这个起作用。。但就是在程序中webview中不起效果。不知道什么原因,那么怎么解决这个问题呢?
两种办法:一种:始终用大图,第二种:用矢量图。矢量图就不用多说了。。不管多大分辨率。显示效果始终一样。。。第一种:用大图的话。要注意图片的尺寸。。。例如。在普通屏下,我现在要显示一张图片大小为30*30的。。。那么在retina 屏中我应该用60*60的图片。。。因为不能自适应。所以我们只能用60*60的图片。。但是在代码中。我们图片的尺寸应该按照小分辨率下来。。
background-size:30px 30px;
这样就能保证不管什么屏。图片始终清晰了。。
分享到:
相关推荐
苹果公司在2010年首次引入了Retina显示屏的概念,这是一种高分辨率的显示技术,旨在提供更清晰、更细腻的图像和文字显示效果。 Retina技术的命名源自人类视网膜的视觉特性,它能分辨出的最小细节,苹果以此为标准,...
ColorSnapper 是一款 Mac OS X 上优秀的取色工具,功能强大且易于使用,除了快速取色外,具有数十种颜色模式,比如可以直接复制为iOS代码的颜色值!...支持Retina视网膜显示屏 显示在通知中心挑选颜色
我们都知道,小程序是一个跨系统的平台。这就意味着,小程序会在不同的设备上运行,但不同设备的分辨率会有差异。 在小程序中,如何在分辨率...但是,随着 Retina 屏幕(即「视网膜屏」)的推出和高分屏的普及, 1 px
iPad Mini2同样拥有7.9英寸Retina视网膜屏幕,同样2048x1536的分辨率,但其采用了银色和深空灰两种外观设计,机身稍厚且略重。 在处理器性能上,小米平板搭载了Tegra K1四核处理器,基于Cortex-A15架构,主频2.2GHz...
为清楚起见,以下是包中包含的内容: 非视网膜 iPhone (3GS),320 x 480 像素视网膜 iPhone(4、4s),640 x 960 像素视网膜 iPhone (5),640 x 1136 像素非 Retina iPad(1、2、Mini [2012]),1024 x 768 像素...
在iOS和Android平台上,开发者通常需要提供不同分辨率的图片以适应不同的设备和屏幕尺寸,例如高清(HD)、视网膜(Retina)或超高清(Ultra HD)分辨率。压缩文件可能包含这些不同尺寸的图片,以方便开发和分发。 ...
SVGgh是iOS的SVG渲染框架 作者 ,所有者介绍在我自己的应用程序中,我经常希望避免在界面元素中使用位图图像。 通常,我需要为Retina,非视网膜,iPhone和iPad添加PNG文件,并且发现自己在界面上只能使用拉伸元素。 ...
- iPad Air以其纤薄的铝制机身和Retina视网膜屏幕赢得了赞誉。它的轻薄设计,加上超窄边框,使得整个设备更加时尚,同时顶部的立体声扬声器提供了更好的音质体验。 - 微软Surface 2则在设计上进行了改良,如背面的...
这是Adobe Illustrator脚本的集合,该脚本可将图层或画板导出到不同密度的PNG(iOS Retina Display,Android设备等)。 如何安装 如果将脚本放置在Adobe Illustrator CS5 / Presets / Scripts文件夹中,则该脚本将...
其次,新款iPad mini引入了Retina视网膜屏幕,其显示效果得到了飞跃式的提升。对于屏幕分辨率有着高要求的用户来说,这是无法抗拒的吸引力。高分辨率的屏幕不仅使得文字和图像的细节更加清晰,还能够提供更优质的...
这款9.7英寸的平板电脑以其Retina视网膜屏幕的卓越显示效果脱颖而出,2048*1536的像素分辨率确保了图像的清晰细腻。搭载的A6X处理器赋予了它强大的性能,无论是运行高清游戏还是处理日常工作任务都能轻松应对。iOS...
虽然两者概念不同,但针对移动设备显示屏,ppi和dpi可以视为相等。例如,iPhone 5的ppi为326,属于视网膜(Retina)屏幕。 根据友盟2014年3月的数据,480 x 800像素的手机占比最高,而720 x 1280像素的手机次之。...
- **视网膜屏幕**:2048×1536分辨率的Retina显示屏,带来极佳的视觉体验。 - **品牌效应**:苹果品牌的加持,使得这款iPad Air在市场上拥有广泛的用户基础。 #### 4. 索尼Xperia Tablet Z - **厚度**:6.9毫米 - *...
Office 2021 for Mac 不仅继承了 Office 系列软件的办公便利性,而且还完美支持 Mac 产品特性,比如:全屏视图、多点触控手势以及 Retina 视网膜显示屏等等。这使得用户可以更方便地使用 Office 2021 for Mac,提高...
戴尔Venue 8 Pro是一款8英寸的Windows平板电脑,搭载了英特尔的Bay Trail处理器,具有高清显示屏幕,售价为299.99美元。这款平板电脑的设计和性能使其在小型Windows设备市场中具有一定的竞争力。 首先,戴尔Venue 8...
在iOS,iPad或MacBook Retina上播放从未如此出色。 热键控件:您玩很多纸牌吗? 尝试热键。 它们将帮助您更快地移动。 许多设置:在设置下控制声音,自动移动,甲板,动画速度等等。 无限撤消:永远不要害怕采取行动...
SmartMag - Responsive & Retina WordPress Magazine SmartMag - 响应和视网膜Wordpress杂志" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart主题、PHP项目源码...
Envision - Responsive Retina Multi-Purpose Theme Envision - 响应视网膜多功能主题" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart主题、PHP项目源码、安卓...