前端用的是weui,用.net mvc寫的,我魅族16th上正常,華為p30上正常,紅米note4x上正常,但是iphone xr,iphone11上顯示就不正常了
先上正常的圖,開發者工具
然后是我的手機
下面是ios設備上不正常的
搜索框占據了整個螢屏
代碼:
<html class="pixel-ratio-2 retina ios ios-11 ios-11-0 ios-gt-10 ios-gt-9 ios-gt-8 ios-gt-7 ios-gt-6">
<head>
<title>意見箱/交流平臺</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="format-detection" content="telephone=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://bbs.csdn.net/h5/Scripts/zepto.min.js"></script>
<script src="https://bbs.csdn.net/h5/Scripts/zepto.weui.min.js"></script>
<script src="https://bbs.csdn.net/h5/Scripts/php.js"></script>
<link href="https://bbs.csdn.net/h5/css/weui.css" rel="stylesheet">
<link href="https://bbs.csdn.net/h5/css/weuix.css" rel="stylesheet">
<link href="https://bbs.csdn.net/h5/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
wx.ready(function () {
//隱藏各個無用選單
wx.hideMenuItems({
menuList: ["menuItem:share:timeline", "menuItem:share:appMessage", "menuItem:share:qq", "menuItem:share:weiboApp", "menuItem:share:facebook"
, "menuItem:share:QZone", "menuItem:editTag", "menuItem:delete"
, "menuItem:copyUrl", "menuItem:originPage", "menuItem:readMode"
, "menuItem:openWithQQBrowser", "menuItem:openWithSafari", "menuItem:share:email"
, "menuItem:share:brand"]
});
});
</script>
<script src="https://bbs.csdn.net/h5/Scripts/common.js"></script>
<style>
/** {
touch-action: none;
}*/
#list_note_icon {
position: fixed;
bottom: 6%;
right: 6%;
z-index: 888;
background: #10aeff;
width: 60px;
height: 60px;
border-radius: 40px;
box-shadow: 2px 2px 2px #888888;
opacity: 0.7;
padding-top: 14px;
padding-left: 14px;
}
#mobile {
margin-left: 22%;
}
.weui-cell {
height: 15px;
}
.page-hd-title {
color: #212121;
}
.weui-picker-container-visible {
bottom: 0%;
}
body, html {
height: 100%;
}
body {
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body ontouchstart="">
<div class="content">
<!-- 搜索 -->
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" action="#">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input class="weui-search-bar__input" id="searchInput" placeholder="搜索" type="search">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<!-- 搜索 -->
<!-- 篩選 -->
<div class="weui-cell">
<div class="weui-cell__hd" style="text-align:center;"><label class="weui-label" style="color:#8a8a8a;">型別：</label></div>
<div class="weui-cell__bd" style="text-align: center;">
<input class="weui-input" id="mobile" type="text" value="https://bbs.csdn.net/topics/請選擇型別" style="color:#b0b0b0;" readonly="">
<input type="hidden" id="hMsgType">
</div>
</div>
<hr>
<!-- 篩選 -->
<!-- 下拉重繪 -->
<div class="weui-pull-to-refresh__layer">
<div class="weui-pull-to-refresh__arrow"></div>
<div class="weui-pull-to-refresh__preloader"></div>
<div class="down">下拉重繪</div>
<div class="up">釋放重繪</div>
<div class="refresh">正在重繪</div>
</div>
<!-- 下拉重繪 -->
<!-- 主體 -->
<div class="weui-form-preview weui-pull-to-refresh" id="Tolist" style="overflow: auto; max-height: 808px;">
<!-- 正文部分 -->
</div>
<!-- 主體 -->
<!-- 上滑加載 -->
<div class="weui-loadmore" style="padding-bottom: 30px; height: 20px; display: none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加載</span>
</div>
<!-- 上滑加載 -->
</div>
<!-- 懸浮按鈕 -->
<a class="weui-btn weui-btn_mini weui-btn_primary" id="list_note_icon" href="https://bbs.csdn.net/h5/Communication/Add">
<i class="fa fa-send" style="font-size: 30px;"></i>
</a>
<!-- 懸浮按鈕 -->
<script src="https://bbs.csdn.net/h5/Scripts/fastclick.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
<script>
//分頁引數
var pageindex = 1;
var pagetotal = 1; //當前共有多少頁
var param = {};
param.page = pageindex;
param.rows = 10;
param.timestamp = 1590999178;
param.status = 1;
param.keyword = "";
param.item1 = ""; //型別篩選
var clientHeight = document.documentElement.clientHeight;
//var cHeight = (clientHeight - 90);
$("#Tolist").css("max-height", clientHeight);
var loading = false; //狀態標記
//enter事件
$(document).keyup(function(event) {
if (event.keyCode == 13) {
var valu = $("#searchInput").val();
loadlist();
$("#searchInput").val(valu);
}
});
//搜索框取消點擊事件
$("#searchCancel").on('click', function() {
$("#searchInput").val('');
})
$(function() {
initFilter();
//上滑加載
loading = false;
$("#Tolist").infinite(200).on("infinite", function() {
if (loading) return;
loading = true;
pageindex++; //頁數
if (pageindex > pagetotal) {
$("#Tolist").append(
"<div class=\"weui-loadmore weui-loadmore_line\"><span class=\"weui-loadmore__tips\">沒有更多資料了</span></div>");
return;
}
param.page = pageindex;
param.refreshtype = "lower";
param.item1 = $("#hMsgType").val();
_ajaxGetData("../Communication/GetList", param, function(data) {
$("#Tolist").append(data.html);
loading = false;
});
});
//下拉重繪
$("#Tolist").pullToRefresh({
distance: 10,
onRefresh: function() {
loadlist();
$("#Tolist").pullToRefreshDone();
}
});
loadlist();
});
function loadlist() {
$(".weui-loadmore").hide();
$("#Tolist").html("");
param.page = 1;
param.refreshtype = "lower";
param.keyword = $("#searchInput").val();
param.item1 = $("#hMsgType").val();
_ajaxGetData("../Communication/GetList", param, function(data) {
pagetotal = data.total;
if (pagetotal <= 0) {
$("#Tolist").append(
"<div class=\"weui-loadmore weui-loadmore_line\"><span class=\"weui-loadmore__tips\">沒有更多資料了</span></div>");
return;
}
$("#Tolist").append(data.html);
});
}
function initFilter() {
$("#mobile").picker({
title: "請選擇型別",
cols: [{
textAlign: 'center',
values: ['請選擇型別', '咨詢', '建議', '投訴']
}],
onClose: function(p) {
var val = (p.value)[0];
if (val == "咨詢") {
$('#hMsgType').val(10);
} else if (val == "建議") {
$('#hMsgType').val(20);
} else if (val == "投訴") {
$('#hMsgType').val(30);
} else {
$('#hMsgType').val(null);
}
param.item1 = $("#hMsgType").val();
loadlist();
}
});
}
</script>
</body>
</html>
麻煩大佬看一下 謝謝了
uj5u.com熱心網友回復：
解決了解決了
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/28983.html
標籤：微信開發