手机页面宽度设置效果,去掉边框距离空白。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!--  -->
<!-- <!DOCTYPE html> -->

<html>
<head>
<base href="http://${header[‘host‘]}${pageContext.request.contextPath}/"/>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  -->
<meta name="viewport" http-equiv="Content-Type" content="text/html; charset=UTF-8;width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"><!-- -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  --> 

<!-- <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/tableStyle.css"  /> -->
<style type="text/css">
    body,th,td{margin:0;padding:0}
    table{border-collapse:collapse;border-spacing:0}
</style>

<title>营销活动</title>
<script type="text/javascript">
function checkForm(){
    document.getElementById("wymzBtn").disabled="disabled";  //设置禁用。
    return true;
    //return false;
}
</script>
</head>
<body style="background: #ffffff;">
<form id="searchForm" action="activity/addMem" method="post" onsubmit="return checkForm();">
<table id="t1" align="center">
    <tr><td align="center">
            <img alt="" src="images/hd/yymz${activity.id }.jpg" id="pic">
    </td></tr>
    <tr><td align="center">
        <table><tr><td align="center"><!-- <img id="pic"  src="images/share.png" width="120px;"/> --></td>
        <td align="center"><br/>
            <c:if test="${hasTag == 1 }">
                <img alt="" src="images/hd/nymz.png" width="160px;"/>
            </c:if>
            <c:if test="${hasTag == 0 && memNo != 0 }">
                <!-- <a href="javascript:doSubmit();">222<img id="pic"  src="images/hd/1rmb_in_2.png" width="320px;"/></a> -->
                <input id="wymzBtn" type="image" src="images/hd/wymz.png" width="160px;" />
            </c:if>
            <!-- token错误找不到对应的memNo情况,Map返回为默认值的情况 -->
            <c:if test="${hasTag == 0 && memNo == 0 }">
                <img alt="" src="images/hd/wymz.png" width="160px;"/>
            </c:if>
            <br/><br/>
        </td>
        </tr></table>
    </td></tr>

    <%-- <tr><td align="center" style="font-weight: 700; font-size: 16px; color: #00a0ff; line-height: 180%; width: 100%; padding: 0 0 20px 0;">已有<strong>${amCount+100}</strong>人参与</td></tr>
     --%>
</table>
    <input type="hidden" name="activityId" value="${activity.id }">
    <input type="hidden" name="memNo" value="${memNo }">
    <input type="hidden" name="token" value="${token }">
    <input type="hidden" name="carNo" value="${activity.otherInfo }">
</form>
<script type="text/javascript">
var witdh =  document.body.clientWidth;  //动态获取屏幕宽度
document.getElementById("pic").width=witdh;
document.getElementById("t1").width=witdh;
//alert("屏幕宽度是:"+witdh);

</script>

</body>
</html>

注意:重点是css代码

body,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}body也是一个容器。也存在margin,padding设置~!
				
时间: 2024-10-11 11:38:57

手机页面宽度设置效果,去掉边框距离空白。的相关文章

js获取input长度并根据页面宽度设置大小

1. js获取页面宽度高度及屏幕分辨率 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去

手机页面尺寸设置(一)

参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ 一.网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放.   其中: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例minimum-scale

手机页面尺寸设置(二)

通用Meta定义 1. (1)强制让文档与设备的宽度保持1:1: (2)文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值): (3)user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小. 下图分别是没有定义viewport和定义viewport在手机上显示的hello world网页.    注意:实际测试中发现,HTC G7自身系统浏览器不支持这一条规则,能够对页面进行放大,一旦放大响应的box也随之放大,导致俄

手机页面左右漂浮, PC端没有滚动条的抓狂问题

手机页面经常设置了设备宽度,也不允许用户缩放,往往发现页面左右宽度大于设备宽度,导致左右页面的漂浮. 针对此现象可以 隐藏各个区块逐一打开 看看到底漂浮发生在哪个区块, 然后针对这个区块,在手机版css里写入overflow:hidden   . 有时候莫名其妙发现PC版页面右侧的滚动条不了, 看看有没有在 body里写overflow:hidden这么坑爹的设置.

移动端H5页面自适应手机屏幕宽度

1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件. 设置px_to_rem的值为75即可. 在代码里输入设置的对应px值,按TAB键就可以转换为rem 在使用时,同事引用flexible.js文件 2.<meta name="apple-mobile-web-app-capable" cont

移动页面HTML5自适应手机屏幕宽度

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

移动页面自适应手机屏幕宽度

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

移动页面自适应手机屏幕宽度--rem

http://jingyan.baidu.com/article/656db918949b59e381249ce1.html 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content=&qu

手机页面目录菜单拉进拉出效果小结

之前用的代码是 left:-100%;-webkit-transition:all 5s ease;->left:0; 测试部分浏览器效果还是不错的,但是还有另外一部分浏览器无敌卡.经同事提点,换了另外一种方式 -webkit-transform:translateX(-100%);-webkit-transition:all 5s ease;->-webkit-transform:translateX(0); 然后,在各个浏览器都顺畅无比了. 手机页面目录菜单拉进拉出效果小结,布布扣,bub