資訊專欄INFORMATION COLUMN
摘要：如果在客戶端嵌入整個的一般來說是沒有問題的，但是如果是某一段的嵌入到中，并且是后臺傳來的數據結構并且是渲染，圖片是背景圖片，要適配手機適配方法是用的屬性適配，寬度獲取背景圖片的寬度這個是后臺傳值的時候就有的是會有想想不到的的，想要全屏展示，
如果在客戶端嵌入整個的html5一般來說是沒有問題的，但是如果是某一段的html5嵌入到webview中，并且是后臺傳來的數據結構并且是PHP渲染，圖片是背景圖片，要適配手機app(適配方法是用css3的zoom屬性適配，zoom=body寬度/獲取背景圖片的寬度（這個是后臺傳值的時候就有的）) 是會有想想不到的bug的，想要全屏展示，有部分兩邊留白的情況，下面一大塊留白，這些問題都不會再iphone中顯示出來的，只有萬能的安卓才會有這么奇葩的問題，所以作為程序員就要找原因，解決問題
首先針對兩邊留白的問題，你可以用各種代碼嘗試看看body的寬度
var windowWidth = $("body").width();
var windowWidth = $(window).width();
var windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
這三行代碼都嘗試過，可以打印在頁面中（在webview中調試要打印在頁面中，因為alert,和console.log這樣的語句APP阻止）；打印出來之后，你會發現這三個的值是一樣的，也就是說JS獲取body的寬度貌似在webview中不確定，
既然JS解決不了，那就讓安卓傳來客戶端的寬度吧（他們叫db,記住他們以為的px和咱們常說的px是不一樣的，所以直接問他們要dp）;只有安卓上才要、傳值哦，記住不是直接傳給JS而是傳給PHP
其次解決下面留白的問題（這個問題也是只有安卓有問題，iphone沒有問題）
下面留白我分析是因為結構加載進來了，所以導致body撐開了之后適配完成body收不回去了，webview也收縮不回去了（這個問題也是只有安卓有問題，iphone沒有問題）
唯一的辦法就是修改渲染機制；
方案一（圖片加載完成之后，適配，但是這個方法并不好用）
代碼如下
win.t_img; // 定時器
win.isLoad = true; // 控制變量
win.isImgLoad(function(){
$(".content").html($("textarea#bodyContent").val());
$(".hot-outer").each(function(){
win.set_hot("#"+this.id);
});
win.change_schema();
});
function isImgLoad (callback){
// 查找所有封面圖，迭代處理
$("img").each(function(){
// 找到為0就將isLoad設為false，并退出each
if(this.height === 0){
win.isLoad = false;
return false;
}
});
// 為true，沒有發現為0的。加載完畢
if(win.isLoad){
clearTimeout(win.t_img); // 清除定時器
// 回調函數
callback();
// 為false，因為找到了沒有加載完成的圖，將調用定時器遞歸
}else{
win.isLoad = true;
win.t_img = setTimeout(function(){
win.isImgLoad(callback); // 遞歸掃描
},500); // 我這里設置的是500毫秒就掃描一次，可以自己調整
}
}
這段代碼會使底部留白出現的頻率降低，但是會影響iphone的加載，比如，圖片出來了一點點，下面被原生的遮住了，所以就想了另外一個方案
**方案二：
結構加載的時候要隱藏結構，適配完成之后再顯示出來**
直接正常加載，但是加載的時候要display:none;
像圖片中的這樣，但是因為我的適配是提取{==$code=}代碼中的類名,獲取寬度做適配，當父級display:none；子級的寬度是獲取不到的
mapWidth = document.querySelector(".partner_img_center").style.width;
H5中新增選擇器querySelector這個是能獲取到的，直接適配，然后顯示，這個就是我目前的解決方案；如果各位有更好的方案，請賜教！
注明：這個方法在背景圖片適配各個APP場景中，并且用zoom的方法做適配的時候用到的，請注意應用場景，歡迎各位指出不足，我會加以指正~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115017.html
摘要：如果在客戶端嵌入整個的一般來說是沒有問題的，但是如果是某一段的嵌入到中，并且是后臺傳來的數據結構并且是渲染，圖片是背景圖片，要適配手機適配方法是用的屬性適配，寬度獲取背景圖片的寬度這個是后臺傳值的時候就有的是會有想想不到的的，想要全屏展示， 如果在客戶端嵌入整個的html5一般來說是沒有問題的，但是如果是某一段的html5嵌入到webview中，并且是后臺傳來的數據結構并且是PHP渲染...
摘要：背景是微信將要從切換成，前端的頁面需要進行適配。以往在做滾動加載的組件時，微信內的翻頁的時候老是要等待下一頁加載，現在終于不用等了。當然也有坑，具體微信內要怎么兼容看文檔。微信在，已經開始灰度了，后續版本會全量。 WKWebView 背景是微信webview將要從UIWebView切換成WKWebView，前端的web頁面需要進行適配。 什么是WKWebView 官方的解釋：WKWeb...
摘要：年前放假的最后一天，我們上線了獨家記憶活動宣傳頁。微信分享主要代碼參考獨家記憶當時光凝固，當回憶定格。這是屬于我和的獨家記憶。 年前放假的最后一天，我們上線了「My Flyme 獨家記憶」 H5 活動宣傳頁。 因種種原因，直到放假前幾天，才突然要求我們參與并開始項目的前端部分。此時大概的情況是：所有數據已計算完畢；后端接口已完成待聯調；交互視覺只出了不到四分之一(一共二十多個頁面)；我...
閱讀 3690·2021-11-22 15:24
閱讀 1592·2021-09-26 09:46
閱讀 1904·2021-09-14 18:01
閱讀 2600·2019-08-30 15:45
閱讀 3526·2019-08-30 14:23
閱讀 1866·2019-08-30 12:43
閱讀 2914·2019-08-30 10:56
閱讀 800·2019-08-29 12:20
