HTML5折叠文字和手机屏幕适应矛盾,背景出现重复

就是我加了一个折叠后原本完全适应手机屏幕的现在向右延伸了,可以向缩小,右滑……第一张是加后第二张是原来的代码如下<head><!--下为适应手机屏幕的代码--><meta... 就是我加了一个折叠后原本完全适应手机屏幕的现在向右延伸了,可以向缩小,右滑……第一张是加后 第二张是原来的代码如下<head><!--下为适应手机屏幕的代码--><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html charset=utf-8" /><title>【深渊】</title><style>html,body,div,h4,p{margin: 0;padding: 0;}html{font: 1em Arial, Helvetica, sans-serif;color: #444;}a{color: #0087f1;}p{margin-bottom: 5px;}#container{margin: 0 auto;width: 600px;}#container h2{font-size: 20px;color: #0087f1;}#wrap{position: relative;padding: 10px;overflow: hidden;}#gradient{width: 100%;height: 35px;repeat-x;position: absolute;bottom: 0;left: 0;}#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}#read-more a{padding-right: 22px;no-repeat50% 100%;font-weight: bold;text-decoration: none;}#read-more a: hover{color: #000;}</style><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){var slideHeight = 0; // pxvar defHeight = $('#wrap').height();if(defHeight >= slideHeight){$('#wrap').css('height' , slideHeight + 'px');$('#read-more').append('<a href="#">展开</a>');$('#read-more a').click(function(){var curHeight = $('#wrap').height();if(curHeight == slideHeight){$('#wrap').animate({height: defHeight}, "normal");$('#read-more a').html('收拢');$('#gradient').fadeOut();}else{$('#wrap').animate({height: slideHeight}, "normal");$('#read-more a').html('展开');$('#gradient').fadeIn();}return false;}); }});</script></head><body><!--下为插入背景的代码--><style type="text/css" >body{background-image:url(background4.jpg);background-position:center; background-repeat:repeat-y;}</style><!--以下为折叠代码--><div id="container"><h4>『解压说明』ZArchiver<div id="wrap"<div>为了保证能使用中文密码压解<br>Zip字符语言选择:<br>【CP936 - Chinese Simplified ANSI/OEM】<br>界面语言选择:<br>【Chinese simplified】<br>解压的时候要点亮眼睛<br>否则有些手机无法输入中文【就是显示密码】</div><div id="gradient"></div></div><div id="read-more"></div></div> 展开
 我来答
o归隐情缘o
2019-06-17 · 而我在远途,在帷幕。所以君不见,卿不遇!
o归隐情缘o
采纳数:618 获赞数:691

向TA提问 私信TA
展开全部

看着这一坨的东西就不想去看了,首先问问题要使用专业术语,

如果不会就要说得清楚一点,代码整理一下,这么乱是没有多少人会愿意去解答的。

你这些设置了可以缩放,一般情况下移动端的是这样的,

有时候还需加上这个:

至于你说的背景问题,你可以通过设置一个盒子为width:100%;height:100%;然后把图片放在这个盒子里面,然后设置图片自适应盒子(display:block; width:100%;),然后在根据body标签来定位,这样它就是一张完美适应的背景图了。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式