关于IOS和安卓微信打开网页,界面显示差异大的问题。

这是IOS通过微信打开的界面:
图片说明

这是安卓打开的界面:
图片说明

## 我想达到的效果就是IOS显示的那样,请问安卓该如何处理?

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="pay.aspx.cs" Inherits="Sczhw.pay" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>百旺税控盘服务费--在线续费</title>
    <meta name="viewport" content="width=640px, maximum-scale=1.0, user-scalable=no"/>
    <link href="/images/payStyle.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript" src="/scripts/jQuery.md5.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).bind('resize load', function() {
                $("body").css("zoom", $(window).width() / 640);
                $("body").css("display", "block");
                $("body").css("zoom", $(window).width() / 640);
                $("input").attr("placeholder", "请填写");
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="bodydiv">
        <div id="payhead"></div>
        <div id="middlebody">
            <table class="tablestyle">
                <tr class="tablestyletr">
                    <td colspan="2" class="ttdstyle">企业名称</td>
                </tr>
                <tr class="tablestyletr">
                    <td colspan="2" class="tdstyle"><asp:TextBox runat="server" ID="companyNameText" BorderWidth="0px" Width="100%" Font-Size="25px"></asp:TextBox></td>
                </tr>
                <tr class="backcolor">
                    <td colspan="2" class="backcolor"></td>
                </tr>
                <tr class="tablestyletr">
                    <td class="ttdstyle">企业税号</td>
                    <td class="tdstyle"><asp:TextBox runat="server" ID="noText" BorderWidth="0px" Width="100%"></asp:TextBox></td>
                </tr>
                <tr class="backcolor">
                    <td colspan="2" class="backcolor"></td>
                </tr>
                <tr class="tablestyletr">
                    <td class="ttdstyle">所属区县</td>
                    <td class="tdstyle">
                        <asp:DropDownList ID="DropDownList1" runat="server">
                            <asp:ListItem>东坡区</asp:ListItem>
                <asp:ListItem>经开区</asp:ListItem>
                            <asp:ListItem>彭山区</asp:ListItem>
                            <asp:ListItem>仁寿县</asp:ListItem>
                            <asp:ListItem>洪雅县</asp:ListItem>
                            <asp:ListItem>青神县</asp:ListItem>
                            <asp:ListItem>丹棱县</asp:ListItem>
                            </asp:DropDownList></td>
                </tr>
                <tr class="backcolor">
                    <td colspan="2" class="backcolor"></td>
                </tr>
                <tr class="tablestyletr">
                    <td class="ttdstyle">座机电话</td>
                    <td class="tdstyle"><asp:TextBox runat="server" ID="phoneText" BorderWidth="0px" Width="100%"></asp:TextBox></td>
                </tr>
                <tr class="backcolor">
                    <td colspan="2" class="backcolor"></td>
                </tr>
                <tr class="tablestyletr">
                    <td class="ttdstyle">联系人</td>
                    <td class="tdstyle"><asp:TextBox runat="server" ID="menText" BorderWidth="0px" Width="100%"></asp:TextBox></td>
                </tr>
                <tr class="backcolor">
                    <td colspan="2" class="backcolor"></td>
                </tr>
                <tr class="tablestyletr">
                    <td class="ttdstyle">手机号码</td>
                    <td class="tdstyle"><asp:TextBox runat="server" ID="menphoneText" BorderWidth="0px" Width="100%"></asp:TextBox></td>
                               </tr>
            </table>
        </div>
        <div id="middlehander"></div>
        <div id="jediv">
            <table class="tablestyle">
                <tr class="tablestyletr">
                    <td class="ttdstyle">续费金额</td>
                    <td class="tdstyle"><asp:TextBox runat="server" ID="jeText" BorderWidth="0px" Width="100%"></asp:TextBox></td>
                </tr>
            </table>
        </div>
        <div id="footdiv">
            <ul>
                <li><span>税控盘费用为200元/盘</span></li>
                <li><span>报税盘费用为100元/盘</span></li>
                <li><span>技术服务费每年280元/盘/年;多套盘时,第一套盘服务费为280元/盘/年,其他盘服务费为140元/盘/年。</span></li>
            </ul>
            <dl>
                <dd>温馨提示</dd>
                <dd>根据发改价格【2017】1243号文件规定:增值税纳税人购买税控系统产品的费用以及缴纳的技术维护费用在增值税应纳税额中全额抵减。收费标准详见:发改价格【2017】1243号文件。</dd>
            </dl>
            <div style="width:100%; text-align:center;">
                <asp:ImageButton runat="server" ID="submitBtn" ImageUrl="~/images/submitbtn.jpg" OnClick="submitBtn_Click" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="companyNameText"
                            ErrorMessage="请输入公司名称!"></asp:RequiredFieldValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="noText"
                            ErrorMessage="请输入纳税人识别号!"></asp:RequiredFieldValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="menText"
                            ErrorMessage="请输入联系人!"></asp:RequiredFieldValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="menphoneText"
                            ErrorMessage="请输入手机号码!"></asp:RequiredFieldValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="jeText"
                            ErrorMessage="请输入缴费金额!"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="jeText" ErrorMessage="请输入正确的金额!" ValidationExpression="^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$"></asp:RegularExpressionValidator>

            </div>
        </div>
    </div>
    </form>
</body>
</html>
 body {margin:0 auto;
}


#bodydiv
{
    width:640px;
    }

.font20{font-size:20px; width:300px;}

#payhead
{
    background-image: url(payhead.jpg);
    height:151px;
    width:640px;
}

#middlebody
{
 width:640px;
    }

#middledl
{
    width:615px; float:right;
    }

.backcolor
{
    background-color: #e6e6e6;
    height:1px;
}

#middlehander
{
    width:640px;
    height:20px;
    background-color:#e6e6e6;
    }


#jediv
{
    width:640px;
    }

#footdiv
{
    width: 640px;
    background-color: #e6e6e6;
}

.tablestyle {
 width:615px;
 padding-left:25px;
}

.tablestyletr {
height:68px;    }

.ttdstyle {
width:130px;
font-size:30px;
}

.tdstyle{ }
.tdstyle input{ font-size:25px; text-align:right; float:right;}
.tdstyle select{ font-size:25px; text-align:right; float:right;}

ul{ padding-top:16px;}

li {
color:#4f83e7; margin-top:25px;
}
li span{
color:#7a7a7a;
}

dl { margin-top:25px;
 }

dl dd {color:#ab3e44; margin-top:10px;}
0

2个回答

试试,body,td设置背景色为白色


body ,td{background:#fff}
1
dailiboy
dailiboy 谢谢大哥,一眼就看出问题所在
12 个月之前 回复

这个是HTML5展示的吗?

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
IOS和安卓微信打开网页,界面显示差异大的问题。
IOS和安卓微信打开网页,界面显示差异大的问题。&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &amp;...
Android和ios微信浏览器中按钮显示不一样的问题
在按钮的样式里面加上:      -webkit-appearance : none ; http://www.cnblogs.com/qiongmiaoer/p/3573211.html
开发页面在微信显示大小异常的问题
head中添加 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">就可以解决了。
微信小程序 web-view 在ios显示空白页面
  最近遇到的一个问题,小程序使用web-view链接到H5页面,业务域名已经配置过了,在安卓系统上也是没有问题,只有ios不能正常显示,出现空白页面。在网上几番查找后,没有效果。   首先下载了safari的windows版(原晾我没有苹果本),打开H5页面发现js报错,原因是js里用了ES6的写法,写小程序写习惯了。然后通通改成ES5,页面正常加载出来了。   然而,小程序并没有展示出来页...
微信公众号h5页面,ios显示正常,安卓手机空白页面
检查一下js代码里边是否有某一行代码: console.log(&quot;打印值:&quot;,); 此处多了一个逗号&quot;,&quot;去掉试试。
IOS安卓微信jssdk二次带参数分享时缩略图变链接问题解决
一、配置    首先:通过微信公众号&amp;gt;&amp;gt;设置&amp;gt;&amp;gt;公众号设置&amp;gt;&amp;gt;功能设置    JS接口安全域名 需要正确      配置我百度找了2个图片:js安全域名可以最多配置3个:比如一个安全域名可以是请求地址的域名,一个可以是图片服务器地址的域名(必须是http协议)二、问题解决  因为ios与Android处理数据机制不同所以有些情况下Android好用而ios在分享...
【APP】微信接口对Android与IOS验证方式的差异
要做微信接口首先要有一个微信开放平台账号 绑定APP得到AppID和AppSecret 对Android开发者需在开发者平台配置 包名和签名 并在程序中配置AppID 而IOS开发者需要在开发者平台配置Bundle ID在程序中配置AppID和AppSecret 不同于Android用包名和签名两个参数决定应用的唯一性 IOS是用Bundle ID决定应用的唯一性 用个不准确但容易懂的说...
微信开发上传图片ios与安卓兼容问题
首先检查一下引入js的版本,用最新的,直接上代码 $('#kin_img').click(function(){ var ua = navigator.userAgent.toLowerCase(); if (ua.match(/iphone/i) == "micromessenger") { var ios = true; } else { va
微信分享——ios和安卓机制居然不一样!
之前分享过一篇转载的微信分享填坑文章 基本涵盖了微信分享功能开发的基本操作。 实际项目中,在做微信分享追踪的时候,遇到了一个百思不得其解的问题。 在加入了用户分享追踪功能之后,页面已经加载完成的情况下,安卓分享功能没有任何问题,ios却总是分享失败。 关于ios和安卓设备的差别 项目需求是,我们需要对用户的分享行为做追踪,对用户从哪个人分享的链接进来的做记...
前端H5用js判断页面在IOS,Android,微信,pc端打开的方法
// 判读是否是IOS打开 isIos: function () { var agent = navigator.userAgent; var isiOS = !!agent.match(/iPhone|mac|iPod|iPad|ios/i); return isiOS }, // 判读是否是PC打开 isPc: function () { var plat = nav...
判断ios/android设备;判断页面是否在微信中打开
判断ios/android设备: var uInIOS = navigator.userAgent; &amp;amp;lt;!-- android终端--&amp;amp;gt; var isAndroid = uInIOS.indexOf('Android') &amp;amp;gt; -1 || uInIOS.indexOf('Adr') &amp;amp;gt; -1; &amp;amp;lt;!-- in android且安卓版本大于8.6--&amp;amp;gt; ...
在电脑端微信或低版本ios,使用微信自带浏览器打开网页不显示
使用了es6的let,不解析let...把let去掉或者使用工具把es6转为es5
关于微信PC版内置浏览器和IOS11以下系统打开页面白屏的问题
        最近在开发的微信公众号项目出现了白屏的问题,安卓端一切正常,只在IOS11以下的苹果手机端和微信PC版内置浏览器打开才会发生。        网上找了很多资料,最后确定是前端JS代码使用了ES6版本的语法,而IOS11以下和微信PC版是不支持ES6语法的,所以需要降低语法到ES5。前端人员在打包的时候进行了转换,但是还是无法解决问题。我们对打包后的文件再次进行转换,问题得到解决。 ...
css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
position属性带来的浮动问题: 项目案例: 网宿流量微信公众号活动红包抽奖页面; 问题描述: 在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常 设备: android设备存在此问题,而ios设备显示正常 原因分析: css属性中对容器的样式中提到,子元素定位方式为absolute或者fix
微信如何通过Html网页调用本地安卓app 或者ios app?
普通浏览器拉起 ps:此处只有android教程,,ios的自己看 文档吧。。   需求 微信如何通过Html网页调用本地安卓app 或者ios app 效果 android端 调用起来apk 没有问题,但是第一次应用没有安装的话  需要点击两次才可以下载,如果已经下载 可以正常调用的经过测试 学堂在线android端和iso端也是用的这个具体测试方法 ios端 微信在6.6.1...
html5 ios与安卓的一些差异性问题
1.ios 下postion:fixed问题  问题描述:设计评论页面,使用position:fixed定位将输入框固定在页面底部,如图:      这种情况下,输入框在获取到焦点时,会随着输入法的弹出而上移。安卓的webview中是没有问题的。而ios中,输入法的弹出会导致整个页面向上滚动一定距离,问题如图:      原因:我的内容区高度设置为100%,也就是说,评论框的下方不可见的区域
使用cookie解决微信不能存储localStorage的问题
最近在开发基于微信的Web页面时,发现有些机型不能存储信息到localStorage中,或者是页面一旦关闭,存储的信息也失效了。 于是想到用cookie来替代localStorage,存储一些简单的数据。上网查找了一下,发现w3school上已有不错的解决方案。 //设置cookie function setCookie(c_name,value,expiredays) { va...
获取网页是否在微信内置浏览器中打开,及判定操作系统是安卓还是IOS
**判定是否是微信端打开的** var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; //是微信端 } else { retu...
微信jssdk在Android 和 iOS 的一处不一致
wx.openLocation,在Android上没有问题,在ios上返回invalid coordinate。最后发现经纬度参数,微信要求传浮点数,而我们传的是字符串,转换成浮点数就正确了。...
用微信浏览器调整字体后页面错位解决方案
普通解决方案:  android暂无方案; ios使用-webkit-text-size-adjust禁止调整字体大小 body{-webkit-text-size-adjust: 100%!important;} 最好的解决方案: 整个页面用rem或者百分比布局 如果html5页面特效多比较,建议开启硬件加速: .css {    -webkit-transform: trans...
最近在用vue做项目,项目在安卓4,5,ios9页面显示空白,问题解决跟大家分享一下
最近在用vue做项目,项目在安卓4,5,ios9页面显示空白,问题解决跟大家分享一下安卓4,5,ios9页面空白原因:低版本不支持es6,需要将es6编译成es5具体解决方法1.npm install&amp;nbsp;--save-dev babel-preset-es2015(安装ES2015转码规则)2....
微信浏览器内兼容android iOS调取手机摄像头进行拍照、打水印、压缩、预览
实现这些功能使用了如下插件: 图片打水印:watermark.js(https://github.com/brianium/watermarkjs) 图片压缩:localResizeImg(https://github.com/think2011/localResizeIMG) 读取图片元数据:exif.js(https://github.com/exif-js/exif-js) html部分//调
用cookie解决新版微信中H5页面底部白条问题
背景        5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞。不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条,        分析        在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。        如果进入H5首页每次都要微信授权来获取用户信息,那这个白条将每次都会出...
font-size在iOS和安卓下大小不一致的解决办法
原因: 因为webkit内核的浏览器会根据容器的宽来做“适应”的字体大小的计算,代码中.item元素内容长短不一,导致容器的宽不一致,部分产生了换行,从而导致浏览器做不一样的缩放处理。 解决方法有两种: 1、-webkit-text-size-adjust:&nbsp;none;方法: 作用:禁用Webkit内核浏览器的文字大小调整功能,以实际大小显示,部分浏览器不支持小于12px的字号将使用12...
微信内网页安卓点击图片放大与IOS点击失效处理方法
安卓机点击图片会自动放大解决方法:(图片点击会无反应,a标签点击有效) // 递归搜索当前元素所有父级,看是否包含有a标签且有href值const searchIsHavaTagA = function (currentEle) {    // 如果一直往上层找,到body还没找到就说明没有了    if (currentEle.nodeName === 'BODY') {        retu...
微信浏览器里区分ios、安卓
在微信浏览器里判断是ios端,还是安卓端, var userAgent = navigator.userAgent; var isAndroid = userAgent.indexOf('Android') &amp;gt; -1 || userAgent.indexOf('Adr') &amp;gt; -1; //android终端 var isiOS = !!us...
微信内网页某些安卓手机不能上传图片文件的问题(1)
最近的一个项目是微信公众号关联的网站,自然用新技术HTML5 了。 在某个手机发布信息的页面中,却碰到了一个诡异的问题。 在某些安卓手机上无法使用上传图片功能,你怎么点都没问题。 微信并没有对type=file做任何特殊处理。但是在Android 4.4.1/4.4.2系统中,这的确没法使用。其它版本中如果客户端如果需要对H5的 标签做支持,即在H5支持选择文件的功能,可以通过重写WebV
h5页面如何判断是系统Android,ios还是微信等
代码如下: var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') &amp;gt; -1, //IE内核 ...
安卓微信网页内,输入法顶起网页元素打乱布局的问题
最近开发微信网页的时候,发现网页中的元素在呼出输入后,元素会改变位置查了资料,发现网页的大小会改变,而我使用的布局是百分比来定位的,所以会改变位置具体验证网页大小是否改变的代码如下window.onresize = function () { var windowHeight = $(window).height();//获取窗口的可见高度,不是整个文档的高度 ...
微信页面打开显示的样式与手机浏览器打开显示的样式不一样
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。   name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">       width - v
Android手机微信访问https链接空白
最近在做一个砍价项目时 出现一个奇怪的问题 访问的url链接是https的 苹果手机微信访问正常 Android手机微信访问空白  Android手机访问的时候 服务器这边Nginx日志中没有收到任何请求  其它app扫一扫、用浏览器访问等都是可以正常访问的(浏览器中打开提示证书不受信任)   单单微信白屏。。     网上开始查  后来发现一篇文章  解决掉了 这个问题   原因是证书链不完整
在线调试微信打开的HTML5页面
需求 现在微信内嵌了自己的 X5 浏览器内核,该内核毕竟与别的主流浏览器还是有一点差别,如何线上调试成了一个棘手的问题。 开发时我们还可以使用 alert,线上错误就没办法了,再说总alert也很烦。 参考 《微信webview调试方法》 下面这个步骤将允许你在电脑的 chromium 浏览器 : 即时查看你在微信中渲染的html的 dom (会额外插入两个辅助用的
关于安卓手机微信访问https链接白屏的问题
之前部署IIS服务器,安装证书后用浏览器访问链接,显示正常 然后很开心的以为部署很成功,又拿了苹果手机微信访问了一下 也是显示成功,然后拿安卓手机的微信访问就显示白屏,什么都没有。然后我就很是诧异,又用安卓手机的普通浏览器访问显示 该证书并非来自可信的授权中心 ,我就开始各种查资料找原因,最后找到原因是因为 证书链不完整 导致的。   证书链其实就是描述证书的签名环节,就比如是 A 颁发证书给
微信在Ios上h5不能分享
在android上能正常分享,IOS,则点击分享没反应。 后来查明,原因是desc过长导致。
安卓微信跳转页面、重定向页面空白,ios系统正常、pc正常、安卓浏览器正常。
如果对你有帮助,请顶我、收藏我,如果有天要聊,请评论我。 这个问题是重定向页面地址参数的问题,参数中有“.”。 由于调用微信支付某个接口要传client_ip,所以在调用服务器接口时,先获取到调用端IP地址,然后写在重定向地址中,等待微信重定向的时候带上这个参数。结果就出现了安卓微信出现空白页面。查看后台日志发现没有跳转到重定向的地址。 再后来判断是参数的问题,于是将嫌疑最大的client_...
小程序ios 和 android 的 布局兼容问题
最近在研究小程序,写了一个简单的展示页面。在微信开发者工具上面调试一切正常,在真机上面测试的时候问题就来了。 在ios 上面 布局出现混乱,查找原因是因为display:flex;标签和属性的部分问题,在android 真机测试 是没有问题的。原因未果。于是换掉了flex布局 完美兼容。。。 小程序在android上获取不到接口数据,后台安全域名已设置,服务器tls1.2 也支持。报错: re
微信内浏览器或系统字体放大缩小,html页面布局错乱问题
微信浏览器可以调整过字体大小: 这样调整完字体,会导致样式上的错误。再次进入微信也是会记录到用户所用的字体大小。 解决办法禁止微信用户修改字体大小: 安卓: &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; (function() { if (typeof WeixinJSBridge == &quot;object&quot; &amp;amp;&amp;amp; typeof Wei...
判断移动端打开的是ios还是android还是微信浏览器
function isWx() { //判断微信系统 var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息
那些H5在Android和IOS上出现的丧心病狂的坑
首先得强调一下,H5和移动设备的交互遇到的问题真的是各种丧心病狂!!但是本主依然还是耐着极大的兴致(无奈)的做了下去。 H5页面在Android或者IOS上运行出现问题(这里的运行指的是h5的页面运行在App里的webview里),测试人员或者上级领导那是直接剑指前端人员,那是各种嘶声力竭的吐槽和追问。啊!为什么会有这些问题!你看你写的真是水!!前端人员一脸憋屈,有苦难言,一口老血闷在心中。
关于安卓webview中的H5微信支付返回白屏的问题解决方案
  废话不多说,也不绕弯子,直接将重点。   白屏为啥会白屏,Activity中的我不知道会不会白屏,我的webview是在fragment中的。我运行微信官方的demo,他的都没有白屏,我的就白屏了。 直到后来我无意间打上了fragment的部分生命周期的方法,发现了其中的端倪。每次要微信支付的时候他会走onPause这个方法,等微信支付,测试1分钱,返回回来的时候 他走了on...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 微信安卓开发教程 微信网页 网页开发教程