开发时遇到一个问题,同一个网页可能在不同的环境下打开,亦可能是PC端,又亦是手机端。而在手机端时由于手机型号不同的分辨率也尽然不同,导致标题显示时无法显示完全,或撑大原标签导致界面变形。
问题描述:
使用PC端打开界面无影响,宽度足够,使用不同型号的手机打开显示效果不一致,有的显示不完全有的撑开变形,总的来说就是程序出现了特别显眼的Bug。
图就不上了,应该都能理解是个什么情况。
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" content="ie=edge"/>
<base href="<%=basePath%>">
<title>资料下载</title>
</head>
<body>
<div style="width: 100%;height: 40px;">
<div style="width: 33%;text-align: left;float: left;background-image:url('${pageContext.request.contextPath }/app/images/03.png'); background-repeat: repeat-x;">
<a href="javascript:void(0);"> <img id="back" οnclick="javascript :history.back(-1)"
src="${pageContext.request.contextPath }/app/images/back1.png" style=" margin-left: 10px;height: 40px;"
height="40">
</a>
</div>
<div style="width: 33%;height:40px;text-align:center;float: left;background-color:#c1c1c1;line-height:40px;">${datumDown.file_name}</div>
<div style="width: 33%;height:40px;float: left;background-color:#c1c1c1;"> </div>
</div>
<div align="center" style="width: 100%;height: 90%;">
${datumDown.content }
</div>
</body>
</html>
通过代码可以发现,正常情况下使用PC端打开是完全没有任何问题的,
但更改到了手机端时, 标题长途在五个字显示正常,一旦字数超过了某个限制就会出现如下,
没错,它被挤变形了,变形了,而且越小的分辨率变得越离谱。
问题解决:
想到了使用滚动条的方式,如若标签内字体所容纳超过了外部的承受范围,则让他已滚动条的方式进行滚动避免变形。
直接怼代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" content="ie=edge"/>
<script type="text/javascript"
src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
<base href="<%=basePath%>">
<title>资料下载</title>
</head>
<body>
<script type="text/javascript">
$(function(){
var divwidth = $("#div").width();
var marqueewidth = $("span").width();
var value = $("#value").text();
if((divwidth-marqueewidth)<20){ //判断间距是否合理
$("#div").html("<marquee behavior='alternate' scrolldelay='250' style='width:auto;padding:0px 20px 0px 20px;'>"+value+"</marquee>");
}
});
</script>
<div style="width: 100%;height: 40px;">
<div style="width: 27%;text-align: left;float: left;background-image:url('${pageContext.request.contextPath }/app/images/03.png'); background-repeat: repeat-x;">
<a href="javascript:void(0);"> <img id="back" οnclick="javascript :history.back(-2)"
src="${pageContext.request.contextPath }/app/images/back1.png" style=" margin-left: 10px;height: 40px;"
height="40">
</a>
</div>
<div id="div" style="width: 53%;height:40px;text-align:center;float: left;background-color:#c1c1c1;line-height:40px;">
<span id="value">${datumDown.file_name}</span>
</div>
<div style="width: 20%;height:40px;float: left;background-color:#c1c1c1;"> </div>
</div>
<div align="center" style="width: 100%;height: 90%;">
${datumDown.content}
</div>
</body>
</html>
其中,使用了marquee标签,无需我们再为此进行特殊编码,亦达到目的,运行后
进行前后滚动,以此达到标题不越界效果,并达到了美观一说。
附上marquee属性等:
marquee
功能:
使文字或者图片等产生移动效果
语法:
<marquee loop="value1" behavior="value2" ....> displaydata </marquee>
注<marquee>是成对标记
truespeed 未知意义
loop
设定跑马灯的次数
behavior
设定走动方式
① scroll 跑到尽头后再重新开始(默认)
② slide 跑完一次就不跑了
③ alternate 以左右来回移动的方式跑
direction
设定跑马灯移动方向
① left 从右向左(默认方式)
② right 从左向右
scrolldelay
设定移动速度,用来设定延迟时间
数值越大,速度越慢(默认为90)
单位以毫秒来计算
scrollamount
设定移动速度,跑马灯移动距离
数值越大,速度越慢(默认为6)
以移动的pixel为单位
width
调整跑马灯的宽度
height
调整跑马灯的高度
bgcolor
设定跑马灯的背景颜色
<MARQUEE> 只适用于 IE ,叫做"跑马灯" 如 Status Bar 的那种,意指走动或卷动的文字,其参数设定比较多。
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
behavior="SCROLL"
决定文字的卷动方式,可选值为:
SCROLL 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,文字一接触左边便全消失。
ALTERNATE 文字向左右两边撞来撞去。
direction="LEFT"
设定文字設定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。
bgcolor="#0000FF"
设定文字卷动范围的背景颜色,颜色值可参考【调色原理】。
height="30" width="150"
>设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。
hspace="0" vspace="0"
设定文字的水平及垂直空白位置。
loop="INFINITE"
设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是默认值,表示无限次。
scrollamount="30"
每「格」文字间的间隔,单位是像素。
scrolldelay="500"
文字卷动的停顿时间,单位是毫秒。
功能:
使文字或者图片等产生移动效果
语法:
<marquee loop="value1" behavior="value2" ....> displaydata </marquee>
注<marquee>是成对标记
truespeed 未知意义
loop
设定跑马灯的次数
behavior
设定走动方式
① scroll 跑到尽头后再重新开始(默认)
② slide 跑完一次就不跑了
③ alternate 以左右来回移动的方式跑
direction
设定跑马灯移动方向
① left 从右向左(默认方式)
② right 从左向右
scrolldelay
设定移动速度,用来设定延迟时间
数值越大,速度越慢(默认为90)
单位以毫秒来计算
scrollamount
设定移动速度,跑马灯移动距离
数值越大,速度越慢(默认为6)
以移动的pixel为单位
width
调整跑马灯的宽度
height
调整跑马灯的高度
bgcolor
设定跑马灯的背景颜色
<MARQUEE> 只适用于 IE ,叫做"跑马灯" 如 Status Bar 的那种,意指走动或卷动的文字,其参数设定比较多。
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
behavior="SCROLL"
决定文字的卷动方式,可选值为:
SCROLL 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,文字一接触左边便全消失。
ALTERNATE 文字向左右两边撞来撞去。
direction="LEFT"
设定文字設定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。
bgcolor="#0000FF"
设定文字卷动范围的背景颜色,颜色值可参考【调色原理】。
height="30" width="150"
>设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。
hspace="0" vspace="0"
设定文字的水平及垂直空白位置。
loop="INFINITE"
设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是默认值,表示无限次。
scrollamount="30"
每「格」文字间的间隔,单位是像素。
scrolldelay="500"
文字卷动的停顿时间,单位是毫秒。
以上marquee标签属性等转载至:http://blog.sina.com.cn/s/blog_49692d0d0100mqno.html