移动Web开发图片自适应两种常见情况解决方案
本文主要说的是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开发图片自适应两种常见情况解决方案的更多相关文章
- 移动站Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...
- Spring WebFlux, 它是一种异步的, 非阻塞的, 支持背压(Back pressure)机制的Web 开发WebFlux 支持两种编程风(姿)格(势) 使用@Controller这种基于注解
概述 什么是 Spring WebFlux, 它是一种异步的, 非阻塞的, 支持背压(Back pressure)机制的Web 开发框架. 要深入了解 Spring WebFlux, 首先要了知道 R ...
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- iOS开发笔记-两种单例模式的写法
iOS开发笔记-两种单例模式的写法 单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h" ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- velocity merge作为工具类从web上下文和jar加载模板的两种常见情形
很多时候,处于各种便利性或折衷或者通用性亦或是限制的原因,会借助于模板生成结果,在此介绍两种使用velocity merge的情形,第一种是和spring mvc一样,将模板放在velocityCon ...
- PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理
C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可 洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...
随机推荐
- [置顶] *p++/*++p区别-linux
#include <stdio.h> main() { char * s = "123456"; char * p; p = s; printf( "%c\n ...
- Spring AOP实现方式三【附源码】
注解AOP实现 源码结构: 1.首先我们新建一个接口,love 谈恋爱接口. package com.spring.aop; /** * 谈恋爱接口 * * @author Administrator ...
- Java 异常类层次结构
在Java中,异常分为受检查的异常,与运行时异常. 两者都在异常类层次结构中. 下面的图展示了Java异常类的继承关系. 图1 粉红色的是受检查的异常(checked exceptions),其必须被 ...
- nginx-rrd监控nginx访问数
一 .查看已安装的nginx是否包含stub_status模块 /usr/local/nginx/sbin/nginx -V nginx version: Nginx/1.2.0 configure ...
- C# 操作 Word 修改word的高级属性中的自定义属性
为 Microsoft Word 创建自动化客户端 启动 Visual Studio .NET. 在文件菜单上,单击新建,然后单击项目.从 Visual C# 项目类型中选择 Windows 应用程序 ...
- OpenLayers 项目完整分析——(二)源代码总体结构分析
转自:http://www.cnblogs.com/lzlynn/archive/2008/07/29/1255848.html 二)源代码总体结构分析 通过前面的项目介绍,我们大概已经知道Openl ...
- LightOJ 1245 Harmonic Number (II) 水题
分析:一段区间的整数除法得到的结果肯定是相等的,然后找就行了,每次是循环一段区间,暴力 #include <cstdio> #include <iostream> #inclu ...
- 远程连接centos
yum install tigervnc yum install tigervnc-server Windows 7下载客户端 tigervnc-1.2.0.exe,在http://sourcef ...
- 解决Mac下Sequel Pro 1.1 连接 Homebrew安装Mysql5.7.8的问题 Sequel Pro 1.1 encountered an unexpected error
解决Mac下Sequel Pro 1.1 连接 Homebrew安装Mysql5.7.8的问题 Sequel Pro encountered an unexpected error Sequel Pr ...
- marvell笔试题(嵌入式软件)
有幸去Marvell参加面试,由于其要求WCDMA/GSM之类的,我还特地恶补了下这方面的知识.后来坐了2个小时的地铁后,到达了Marvell.公司还蛮不错的,里面环境都还可以.我投了这家公司也是同学 ...