本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案。开始吧

  在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范围内,防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情,用户体验大大降低。二是图文混排的文章,图片最大宽度不超过屏幕宽度,高度可以auto。这两种情况在项目中很常见。另外,有人说做个图片切割工具,把图片尺寸比例都设定为统一的大小,但即使这样,面对各种大小的移动设备屏幕,也是无法适用一个统一方案就能解决得了的。而且如果需求太多,那服务器上得存多少份不同尺寸的图片呢?显示不太符合实际。

  下面是图集类型,需求方要求图片高宽都保持在手机可视视野范围,js代码列在下面:

    <script type="text/javascript">
$(function(){ var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持
/*
var _width = window.screen.width;
var _height = window.screen.height - 20; var _width = document.body.clientWidth;
var _height = document.body.clientHeight - 20;
*/
var _width,
_height;
doDraw(); window.onresize = function(){
doDraw();
} function doDraw(){
_width = window.innerWidth;
_height = window.innerHeight - 20;
for( var i = 0, len = imglist.length; i < len; i++){
DrawImage(imglist[i],_width,_height);
}
} function DrawImage(ImgD,_width,_height){
var image=new Image();
image.src=ImgD.src;
image.onload = function(){
if(image.width>30 && image.height>30){ if(image.width/image.height>= _width/_height){
if(image.width>_width){
ImgD.width=_width;
ImgD.height=(image.height*_width)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>_height){
ImgD.height=_height;
ImgD.width=(image.width*_height)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
} } })
</script>

  注意:测试中发现安卓4.0+的系统对window.screen.width属性支持的不好,很多情况在首次加载时返回的屏幕像素不正确。本人的安卓2.3.3系统测试通过,支持该属性。据说,这是安卓系统的bug,可以通过setTimeout设置延时时间来解决这个问题。不过,这个方法,本人怎么测试都行不通。所以干脆还是另寻高明吧。发现window.innerWidth可以担此重任,没有发现兼容问题,ok。

  下面是,第二种情况,图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求,对高度不做限制,相对容易些。

  改造上面的javascript代码,如下:

    <script type="text/javascript">
$(function(){
var imglist =document.getElementsByTagName("img");
//安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持
var _width;
doDraw(); window.onresize = function(){
//捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示
doDraw();
} function doDraw(){
_width = window.innerWidth;
for( var i = 0, len = imglist.length; i < len; i++){
DrawImage(imglist[i],_width);
}
} function DrawImage(ImgD,_width){
var image=new Image();
image.src=ImgD.src;
image.onload = function(){
//限制,只对宽高都大于30的图片做显示处理
if(image.width>30 && image.height>30){
if(image.width>_width){
ImgD.width=_width;
ImgD.height=(image.height*_width)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
} }
} } })
</script>

  说明:代码中的resize函数,是捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示。当然了,前提是像我的项目一样,文章直接为富文本格式,图片的父级标签已经设定了text-align:center的居中属性。如果你的文章内容是直接调用第三方的,那么你可以在上面的javascript代码中添加相应的处理语句即可。

移动站Web开发图片自适应两种常见情况解决方案的更多相关文章

  1. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  2. Spring WebFlux, 它是一种异步的, 非阻塞的, 支持背压(Back pressure)机制的Web 开发WebFlux 支持两种编程风(姿)格(势) 使用@Controller这种基于注解

    概述 什么是 Spring WebFlux, 它是一种异步的, 非阻塞的, 支持背压(Back pressure)机制的Web 开发框架. 要深入了解 Spring WebFlux, 首先要了知道 R ...

  3. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  4. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  5. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  6. iOS开发笔记-两种单例模式的写法

    iOS开发笔记-两种单例模式的写法   单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h" ...

  7. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  8. velocity merge作为工具类从web上下文和jar加载模板的两种常见情形

    很多时候,处于各种便利性或折衷或者通用性亦或是限制的原因,会借助于模板生成结果,在此介绍两种使用velocity merge的情形,第一种是和spring mvc一样,将模板放在velocityCon ...

  9. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

随机推荐

  1. DOM操作的性能优化

    DOM操作的真正问题在于 每次操作都会出发布局的改变.DOM树的修改和渲染. React解决了大面积的DOM操作的性能问题,实现了一个虚拟DOM,即virtual DOM,这个我们一条条讲. 所以关于 ...

  2. legend3---8、烦请节约时间

    legend3---8.烦请节约时间 一.总结 一句话总结: 时间不要浪费在垃圾情绪和无效社交上面. 1.商标不能以个人的名义注册? 可以先注册个体工商户,然后再可以注册商标 2.注册一个商标大概花多 ...

  3. 在Ubuntu 16.04 LTS下编译安装OpenCV 4.1.1

    目录 一 安装前的准备 二 编译并安装OpenCV 4.1.1 注:原创不易,转载请务必注明原作者和出处,感谢支持! OpenCV目前(2019-8-1)的最新版本为4.1.1.本文将介绍如何在Ubu ...

  4. python 3.6闭包+循环获取出字典中所有的值并保存在list中

    def list_test(): list1=[] def list_all_dict(a): #检测字段类型 if isinstance(a,dict): for x in range(len(a) ...

  5. springmvc快速入门(XML版本)

    1)springmvc快速入门(传统版) 步一:创建springmvc-day01这么一个web应用 步二:导入springioc,springweb , springmvc相关的jar包 步三:在/ ...

  6. js-xlsx

    XLSX.read(data, {type: type}); type主要取值如下: base64: 以base64方式读取: binary: BinaryString格式(byte n is dat ...

  7. 使用redis防止重复提交

    使用redis防止重复提交   其实主要思路是他的https://blog.csdn.net/u013378306/article/details/52944780 主要目前我的情况是,前后端分离的, ...

  8. Linux 查看 MySQL的版本信息

    Linux 查看 MySQL的版本信息 如何查看某台 Linux 主机上的 安装的 MySQL版本信息? 使用如下命令,查看 MySQL的版本信息: mysql -V 或者 mysql --versi ...

  9. html5 iphone input 输入法 弹窗将页面顶起 解决办法

    给 input 添加失焦事件,然后滚动视图 input.search(type="text",@blur="scrollTop") scrollTop(){ w ...

  10. 【转】Jquery ajax与asp.net MVC前后端各种交互

    本文转载自:https://www.cnblogs.com/fengyeqingxiang/p/11169218.html 1.Jquery通过ajaxSubmit提交表单 if (jQuery(&q ...