如何处理高像素密度屏幕(手机平板等移动设备)一像素线条边框素材(比如边框)不发虚

荣耀手机平板 屏幕 左边距离边框一厘米左右有一条蓝色的竖线,截屏截不到竖线_百度知道
荣耀手机平板 屏幕 左边距离边框一厘米左右有一条蓝色的竖线,截屏截不到竖线
我有更好的答案
别太强求家系统设计
屏幕生产歪了
设置一下,都能实现。
其他类似问题
为您推荐:
截屏的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁后使用快捷导航没有帐号?
一个顶十个——让Gaia网页应用(Web App)支持多重设备(一、像素密度)
本文引自,作者:gasolin。
使用网页技术开发应用的好处是让用户不管在什么设备上,只要有浏览器,基本上都能使用自己习惯的服务。同时如果有需要,也可以比较容易的通过等技术,将网页应用封装成不同平台的原生应用。在多种手持设备操作系统并存的今天,开发者也能在同一个(广泛的)技术领域累计自己的技术能力,以应对越来越复杂的挑战。
因为我相信以上这些想法,所以在今年初因缘际会加入了Mozilla,得以用全部的时间尝试“开源+移动+网页”技术(Open,Mobile,Web)。想要参与Firefox OS前端开发的朋友,可以先看看我整理的简报)。
让网页应用支持多种设备
在这里想和大家分享近期正要解决的工程难题,并且在开始动工时,收集大家的意见:
如何让Gaia网页应用(Web App)和其他的网页应用也能支持多种设备?
所谓的多种设备,需要考虑的除了各种大小的手机、平板电脑之外,还包括可能使用的电脑、电视等设备。
我们想要达到的,使用最少的修改,支持尽可能多的设备。通过一段研究与试验的过程,得到要让网页应用支持多种设备,开发者需要根据设备的“像素密度”(Pixel Density)和“屏幕大小”(Screen Size),处理相对应的“排版”和“图片”问题。这篇文章将阐述处理“像素密度”相关问题的方法。
屏幕能显示的大小,通常都使用“像素”来表示。例如Firefox OS刚开始时支持的手机屏幕解析度是320×480。便是使用的是能显示宽320点像素,长480点像素的手机屏幕。这时基本的像素密度是1x (x通常代表倍数)。如果想在一样实际大小的手机上,将屏幕分辨率增加到640×960 (iPhone 4 是其中的代表),拿出其中一个维度来看,就像是在一把共有320个刻度的尺子上刻上2倍的密度。为了在同样大小的池子上挤进2倍的刻度,我们得将原来池子上的每一个刻度再更细的划分成2个刻度(320 x 2 = 640),这时像素密度是2x。
当然像素不是尺子,所以除了 2x 之外,还有1.5x 等倍数出现。
设备像素(Device Pixel)和CSS像素(CSS Pixel)
解析度翻倍,画面更细致,但用户界面变得太小了
我们原本所理解的屏幕上的像素,是屏幕上每个负责显示图像的物理单位。每个像素都可以显示独立的颜色、亮度,每个像素的大小是固定的。
曾经我们在浏览器中使用“window.screen.width”或“window.innerWidth”等方法所获得的像素,与实际设备上的像素是一致的。但2011年Apple推出了iPhone 4.在同样的屏幕尺寸下,将原本320×480分辨率的屏幕一举升级成了640×960分辨率。但这样一来,圆满通过检测“屏幕宽度小于320/480px,就显示手机版”这样的逻辑,来定制化手机版网页的众多网站就要出问题了。
为了解决兼容性问题,从此在不同像素密度的机器上,网站通过浏览器所获得的像素,不再与实际的像素相同,通过浏览器所获得的像素是“实际的像素/像素密度”的值。为了区别两种“像素”,硬件上的实际像素被称为设备像素(Device Pixel)。而在浏览器中通过CSS/JS获得的像素被称为CSS像素(CSS Pixel)。
从另一个角度来看,由于不同机种上的像素密度不同,可能会出现同样是 960×1280分辨率的机种,一个是手机(3-5英寸),一个是平板(5-10英寸)的情况。考虑到手机的屏幕要小多了,如果在上面使用相同的像素来显示同样的按钮(界面元件),按钮很容易小到变得难以触摸。如果使用CSS像素来定义界面元件的大小,则科技在画面上保持相近的排版。
像素密度 x 排版
使用’rem’为排版单位,使版面保持一致
我们在开发网页时,以相同尺寸、但三种不同像素密度的机种来看,实际的像素是320px(320 x 1x)、480px(320 x 1.5x)、640px(320 x 2x)(设备像素),已通过“window.screen.width”API一样会取得320px(CSS 像素),以尽量减少不同像素密度可能造成应用的排版问题。
在前一篇文章(伸缩自如 – Gaia 的多分辨率支持)里,同事已分享了我们在目前的开发分支(v1.1.0hd)中,对不同像素密度(Pixel Density)机种所做的支持。提到了在开发分支中我们已使用取代px作为基本排版单位,参照「html」标签定义的「font-size」进行缩放,让版面在不同像素密度机种上保持排版的一致 [3]。
Firefox OS 中在 1x 像素密度的环境下,将每 1 个 rem 定义成 10 个设备像素。因此在修改的过程中,我们将原本使用的 10 CSS像素 (px) 单位改为1 rem。
对于网页应用来说,不同像素密度机种排版的特点,是整体因为从JS/CSS获得的宽和高仍然保持不败,所以排版大致保持不变。但因为实际的像素已有提升,所以在相同尺寸的机种上,确可以看到更多网页内容。
像素密度 x 图片
使用高分辨率图片并固定图片宽度,得到相同大小但更清晰的图片
为了支持多种像素密度的手机,在Gaia中已经提供了基本图片(.png)和使用@1.5x.png、@2x.png来满足不同像素密度的需求。
至于图片和像素密度的关系,我们先来看在1x像素密度下的原图(logo.png)
在 2x 像素密度的手机上,因为实际的分辨率是原來的2倍,呈现在画面上是每个像素被放大 2 倍的样子:
我们看到,因为原来的图片分辨率比较低,在高分辨率设备上放大后可以看到细节上出现了锯齿。
我们可以做的,是提供2x解析度的图片(logo@2x.png,通常以后缀@2x.png命名)
有趣的是,因为在没有设定大小的情况下,图片在网页上排版会以它的像素大小为准,在画面上显示的图片大小会是原本的2倍,于是画面上看到的样子是这样:
解决的方法,是在每个图片上加入宽高设定。例如原本加图片只写:
background: url(‘/style/images/loading_spinner.png’);
要支持多种像素密度的手机,需要明确指定图片的大小:
background: url(‘/style/images/loading_spinner.png’);
background-size: 6
修改之后,在高分辨率设备上的图片,终于再次回到原本应显示的大小。
Gaia 如何提供不同像素密度的图片
另一个像素密度 x 图片的问题,是如何提供不同像素密度的图片。因为Gaia的目的是提供各Firefox OS手机预装,装在同一个手机上时,只会有其中一种像素密度,并不需要同时提供不同像素密度的图片。所以可以使用编译工具来在不同像素密度直接进行切换。
上一篇文章中使用的「HIDPI=1」参数,已经被「GAIA_DEV_PIXELS_PER_PX=像素密度」替换。例如想替换成2x像素密度图片,可以使用如下命令:
$ make DEBUG=1 GAIA_DEV_PIXELS_PER_PX=2
通过Firefox火狐浏览器测试像素密度
執行後使用 Firefox Nightly 或 Aurora 版本來執行 Gaia 測試。這時預設的像素密度還是 1x。
执行后使用Firefox Nightly 或 Aurora 版本来执行Gaia测试。这时预设的像素密度还是1x。
我们可以开启about:config页面,搜索“Pixel”,修改layout.css.devPixelsPerPx参数值为2(代表2倍像素密度),这样整个浏览器会被设定为对应的像素密度。(因为实际桌面的解析度并没有改变,提高像素密度的效果就是整个浏览器画面“长大”了)。
开发者要根据设备的“像素密度”和“屏幕大小”,处理对应的“排版”与“图片”问题。
要支持不同像素密度的手机:
CSS像素 = 设备像素 / 像素密度
用 rem 取代 px 作为基本排版单位
图片中加入宽高设定
(如果读者想知道这个主题有多难写,看看拗口的相关文章标题就可以一窥一二)
牛气哄哄的软件,学习了&
rem感觉像px+em.CSS3中出来的新玩意.&我想要1000元左右的手机,前后像素高一点的,屏幕大一点,性价比好点,请推荐一下,、而且我想从网上买,不知..._百度知道
我想要1000元左右的手机,前后像素高一点的,屏幕大一点,性价比好点,请推荐一下,、而且我想从网上买,不知...
我想要1000元左右手机,前像素高点,屏幕点,性价比点,请推荐,、且我想网买,知道靠
佳域G4 & & 官网缺货能淘宝逛逛官网说实体店淘宝都网店电联系记定要用支付宝付款cpu能1.5G奥n003 & &款现没货淘宝确定否货优米x2 & &款要1500元貌似没货没性价比太高产量低曝光期:2013手机类型:3G手机智能手机平板手机外观设计:直板主屏尺寸:5英寸触摸屏:电容屏点触控主屏材质:IPS主屏辨率:像素屏幕像素密度:441ppi网络类型:双卡双模网络模式:GSMWCDMA数据业务:GPRSEDGEHSDPA支持频段:2G:GSM 850/3G:WCDMA 850/2100MHz键盘类型:虚拟键盘机身颜色:钛金灰云石白手机尺寸:141x70x8.9mm硬件参数 操作系统:Android OS 4.2核数:四核CPU型号:联发科 MT6589TCPU频率:1536MHzGPU型号:Imagination PowerVR SGX544RAM容量:2GBROM容量:32GB存储卡:MicroSD卡扩展容量:64GBSIM卡类型:SIM卡电池类型:拆卸式电池电池容量:2500mAh基本功能 输入:手写笔画拼音输入输入式:手写通记录:已接+已拨+未接电通讯录:名片式存储短信(SMS) 彩信(MMS) 录音功能 情景模式 主题模式 闹钟功能 计算器 历功能产品特性 应器类型:重力应器光线传器距离传器磁传器GPS导航 陀螺仪拍照功能 摄像:内置摄像类型:双摄像(前)前置摄像像素:200万像素置摄像像素:1300万像素传器类型:CMOS闪光灯:LED补光灯自焦:支持场景模式:夜景落派肖像风景影院图像尺寸:支持像素照片拍摄视频拍摄:支持娱乐功能 视频播放:支持3GP/MP4等格式音频播放:支持MIDI/MP3/AAC等格式图形格式:支持JPEG等格式电书数据功能 蓝牙传输:支持蓝牙4.0WLAN功能:WIFI浏览器:支持数据接口:Micro USB v2.0 纠错耳机插孔:3.5mm
其他类似问题
为您推荐:
其他3条回答
华G520移版米红米手机售价799元两款关注我手机现G520移版已经预订红米手机哈哈
1000的华为的G520不错,你可以去看看,还是4核的,不过唯一的缺点就是没有闪光灯。小米刚刚推出的红米貌似也不错,首推这两款。其他我不考虑。
小米出的红米手机
性价比的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Promotions
Estimated Shipping
&s:Button&
&s:MultiDPIBitmapSource
source160dpi="@Embed('/assets/refresh160.png')"
source240dpi="@Embed('/assets/refresh240.png')"
source320dpi="@Embed('/assets/refresh320.png')"/&
&/s:Button&
ActionBar #titleDisplay { fontSize: 24 }
@media (application-dpi: 160)
ActionBar #titleDisplay { fontSize: 18 }
@media (application-dpi: 320)
ActionBar #titleDisplay { fontSize: 36 }
public class TransparentRoundedButtonSkin extends ButtonSkin
public function TransparentRoundedButtonSkin()
switch (applicationDPI)
case DPIClassification.DPI_320:
upBorderSkin = skins.assets320.TransparentRoundedButton_
downBorderSkin = skins.assets320.TransparentRoundedButton_
case DPIClassification.DPI_240:
upBorderSkin = skins.assets240.TransparentRoundedButton_
downBorderSkin = skins.assets240.TransparentRoundedButton_
// default DPI_160
upBorderSkin = skins.assets160.TransparentRoundedButton_
downBorderSkin = skins.assets160.TransparentRoundedButton_
@media (application-dpi: 160)
fontSize: 20;
@media (application-dpi: 240)
fontSize: 30;
@media (application-dpi: 320)
fontSize: 40;
&?xml version="1.0" encoding="utf-8"?&
&s:Application xmlns:fx="/mxml/;
xmlns:s="library:///flex/spark"
splashScreenImage="@Embed('assets/SplashScreen.png’)"
splashScreenMinimumDisplayTime=”2000”
splashScreenScaleMode=”zoom”&
&/s:Application&
import spark.preloaders.SplashS
public class MultiDPISplashScreen extends SplashScreen
[Embed(source="assets/splash160.png")]
private var SplashImage160:C
[Embed(source="assets/splash240.png")]
private var SplashImage240:C
[Embed(source="assets/splash320.png")]
private var SplashImage320:C
public function MultiDPISplashScreen()
import spark.preloaders.SplashS
import mx.core.DPIC
import mx.core.mx_
use namespace mx_
public class MultiDPISplashScreen extends SplashScreen
[Embed(source="assets/splash160.png")]
private var SplashImage160:C
[Embed(source="assets/splash240.png")]
private var SplashImage240:C
[Embed(source="assets/splash320.png")]
private var SplashImage320:C
public function MultiDPISplashScreen()
override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
if (dpi == DPIClassification.DPI_160)
return SplashImage160;
else if (dpi == DPIClassification.DPI_240)
return SplashImage240;
else if (dpi == DPIClassification.DPI_320)
return SplashImage320;
&?xml version="1.0" encoding="utf-8"?&
&s:Application xmlns:fx="/mxml/;
xmlns:s="library:///flex/spark"
preloader=”MultiDPISplashScreen”&
&/s:Application&想要一个平板手机前后摄像头像素越高越好屏幕大一些的最好是国产的1000左右。要那种经久耐用的。_百度知道
想要一个平板手机前后摄像头像素越高越好屏幕大一些的最好是国产的1000左右。要那种经久耐用的。
提问者采纳
1、摩托罗拉(Motorola)XT615 3G手机(黑色)WCDMA/GSM直降510元2011市京东价格:1588元看看 摩托罗拉(Motorola)XT615薄尚 取代非纤薄尚私属于智与型震撼观视界限新鲜玩趣随HOLD住震撼影像造全新影响力 9.8mm超薄精致机身搭配闪烁呼吸灯拥惊9.8mm超薄机身、称面板设计搭配闪烁呼吸灯让彻底平庸沉闷相隔绝论高贵牌套装街潮流装扮MOTO锋丽XT615都能作尚配件、4英寸FWVGA 靓丽屏配备4英寸FWVGA靓丽超屏让每影像细节都纤毫毕现超屏幕让手机变随身影院论场面宏鸿片巨制、风格唯美浪漫剧集都让随随犹置身星级影院
性化界面设计私属化定制体验全新理念MOTO性化界面习使用习惯熟稔性汇聚各类新鲜趣功能全新界面集合专属于魅力空间世界随同属于智慧终端独绚烂风尚品位 800万像素摄像VGA前置摄像配备震撼性800万摄像让足媲美专业摄影师摄影达每瞬间都绝美演绎;每影像都造全新影响力VGA前置摄像让随与至密亲朋享即欢乐
Android2.3智能系统海量应用载搭载Android2.3智能系统海量应用畅快载随体验穷尽玩趣应用3G/WLAN(WAPI/WIFI)高速互联纵情网络极速握
2、三星(SAMSUNG)Galaxy I8250 3G手机(金属灰)TD-SCDMA/GSMAndroid 2.3<img class="word-replace" src="/api/getdecpic?picenc=0ad.0寸屏<img class="word-replace" src="/api/getdecpic?picenc=0adGHz高速处理器,支持CMMB手机电视尽享奥运赛事京东价格:1999元电池容量比较哈哈 4英寸触屏 - 4英寸超触屏启非凡视界 金属拉丝质 - 金属拉丝质闪耀尚光芒
1GHz高速处理器- 1GHz高速处理器超越平凡体验 CMMB手机电视 - 支持CMMB手机电视直播刻尽掌握
TouchWiz操作界面- TouchWiz操作界面优雅随触 容量电池 - 超容量电池让精彩进行底3、摩托罗拉手机XT685(摩卡棕) 双卡双待靓丽尚手机高富帅 苏宁易购价格:1899元
即即享极速3G互联体验双卡双待极速3G互联WCDMA+GSM双卡双待世界处您主场许您需要跨越半球或要同与合作伙伴密切商洽都尽享迅捷优势绝资讯盲区震撼影像造全新影响力800万像素摄像许相信颗强悍摄像置入纤薄机身<img class="word-replace" src="/api/getdecpic?picenc=0ad0万像素摄像照片放再放细节依旧细腻入微真瞬间轻松定格4.0代全新体验Android 4.0智能系统搭载新Android4.0智能系统领先智能平台集合项性化革新 让经意间快步非纤薄尚称设计搭配闪烁呼吸灯称面板设计全白显示屏惊艳亮相搭配闪烁呼吸灯让彻底平庸沉闷相隔绝论高贵牌套装街潮流装扮MOTO锋丽XT685都能作尚配件震撼观视界限4英寸FWVGA 靓丽屏配备4英寸FWVGA靓丽超屏让每影像细节都纤毫毕现超屏幕让手机变随身影院论场面宏鸿片巨制、风格唯美浪漫剧集都让随随犹置身星级影院
提问者评价
你真棒,学习了
其他类似问题
1、兴 U880市手机 配置说同价格面高参考价格:¥735主屏:3.5英寸 800x480像素摄像:500w2、华 Ascend G300 U8818近比较火手机参考价格:¥999主屏:4英寸 800x480像素摄像:500w3、语黄蜂参考价格:¥600主屏:3.5英寸
480x320像素
模式:GSM,WCDMA类型:3G手机,智能手机
外观:直板4、辣椒参考价格:¥699主屏:4英寸
800x480像素
模式:GSM,WCDMA类型:3G手机,智能手机
外观:直板另外推荐1、三星5660手机用比较 三星知名牌参考价格:¥1100主屏:3.2英寸
480x320像素
模式:GSM,WCDMA类型:3G手机,智能手机
外观:直板2、htc g13网络模式:GSMWCDMA网络类型:单卡双模外观设计:直板主屏尺寸:3.2英寸
太感谢了,你能说说它们的缺点吗
缺点都是一致的 国产机 质量一般 反应速度不是很快
为您推荐:
其他1条回答
三星s5830.米m1
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁

我要回帖

更多关于 欧式边框素材线条 的文章

 

随机推荐