【移动端】关于图片的大小----怎样保证图片高清

一、设备像素比（ window.devicePixelRatio ）

设备像素比= 设备上物理像素/设备独立像素

非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素(视区宽度)也是320像素，因此，window.devicePixelRatio等于1.(chrome浏览器)

在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.（iphone4 iphone5）

时间： 2024-08-03 19:33:03

【移动端】关于图片的大小----怎样保证图片高清的相关文章

FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小分析假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; margin: 1em; } 当然简单如下的html是不能限制图片大小的 <div class=“picture-area”> <img src=“…” alt=“…”> </div> 换个思路,将图片作为div的背景图片 <div style=“background-ima

移动端高清屏适配方案

结论: 用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,应用flexiable方案在其它页面,固定视口,不缩放,使用rem做布局适配,js添加屏幕标识以便调整字体大小(即布局使用rem,字体使用百分比),使用@2x图片,只做ios8+的1px处理面临的问题: 在不同大小和高清的屏幕下: 如何保证界面布局一致性:不错乱,不变形如何保证字体大小一致性:大屏显示更大,小屏显示更小或更多如何保证 1px边框一致性:不同的高清屏也在正常显示1px的高度大小如何保

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

根据size截取图片中间矩形区域的图片这里的size是正方形

#pragma mark 根据size截取图片中间矩形区域的图片这里的size是正方形 -(UIImage *)cutCenterImage:(UIImage *)image size:(CGSize)size{ CGSize imageSize = image.size; CGRect rect; //根据图片的大小计算出图片中间矩形区域的位置与大小 if (imageSize.width > imageSize.height) { float leftMargin = (imageSize

如何设置Matlab输出到Word中图片的大小

方法一:快速型核心方法:设置Word显示比例100%,Matlab的图像大小与屏幕所见的相同:根据Word的排版要求,估计Matlab图像在Word中的大小,进而调整图像大小. 具体操作:(以下操作应对图像绘制完成后进行,图像绘制中字体大小.线宽等都与排版需要一致,比如8号字体,需要故意设置很大再缩小) (1)在Matlab图像窗口中,选择Edit--Copy Options--Preferences --match screen size(所见即所得) (2)将Word的显示比例设置成100%

BitmapFactory.Options详解怎样获取图片的大小遇到大一些的图片，遇到OOM(Out Of Memory)的问题

下面我们回到我们的主题上来:怎样获取图片的大小? 思路很简单: 首先我们把这个图片转成Bitmap,然后再利用Bitmap的getWidth()和getHeight()方法就可以取到图片的宽高了. 新问题又来了,在通过BitmapFactory.decodeFile(Stringpath)方法将突破转成Bitmap时,遇到大一些的图片,我们经常会遇到OOM(Out Of Memory)的问题.怎么避免它呢? 这就用到了我们上面提到的BitmapFactory.Options这个类. Bitmap

js获取图片原始大小

摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=&quo

移动端高清适配方案（解决图片模糊问题、1px细线问题）

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form')