国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webview中嵌入部分html5適配的小方法~

DataPipeline / 573人閱讀

摘要：如果在客戶端嵌入整個(gè)的一般來說是沒有問題的，但是如果是某一段的嵌入到中，并且是后臺(tái)傳來的數(shù)據(jù)結(jié)構(gòu)并且是渲染，圖片是背景圖片，要適配手機(jī)適配方法是用的屬性適配，寬度獲取背景圖片的寬度這個(gè)是后臺(tái)傳值的時(shí)候就有的是會(huì)有想想不到的的，想要全屏展示，

如果在客戶端嵌入整個(gè)的html5一般來說是沒有問題的，但是如果是某一段的html5嵌入到webview中，并且是后臺(tái)傳來的數(shù)據(jù)結(jié)構(gòu)并且是PHP渲染，圖片是背景圖片，要適配手機(jī)app(適配方法是用css3的zoom屬性適配，zoom=body寬度/獲取背景圖片的寬度（這個(gè)是后臺(tái)傳值的時(shí)候就有的）) 是會(huì)有想想不到的bug的，想要全屏展示，有部分兩邊留白的情況，下面一大塊留白，這些問題都不會(huì)再iphone中顯示出來的，只有萬能的安卓才會(huì)有這么奇葩的問題，所以作為程序員就要找原因，解決問題
首先針對(duì)兩邊留白的問題，你可以用各種代碼嘗試看看body的寬度
var windowWidth = $("body").width();
var windowWidth = $(window).width();
var windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
這三行代碼都嘗試過，可以打印在頁面中（在webview中調(diào)試要打印在頁面中，因?yàn)閍lert,和console.log這樣的語句APP阻止）；打印出來之后，你會(huì)發(fā)現(xiàn)這三個(gè)的值是一樣的，也就是說JS獲取body的寬度貌似在webview中不確定，
既然JS解決不了，那就讓安卓傳來客戶端的寬度吧（他們叫db,記住他們以為的px和咱們常說的px是不一樣的，所以直接問他們要dp）;只有安卓上才要、傳值哦，記住不是直接傳給JS而是傳給PHP
其次解決下面留白的問題（這個(gè)問題也是只有安卓有問題，iphone沒有問題）
下面留白我分析是因?yàn)榻Y(jié)構(gòu)加載進(jìn)來了，所以導(dǎo)致body撐開了之后適配完成body收不回去了，webview也收縮不回去了（這個(gè)問題也是只有安卓有問題，iphone沒有問題）
唯一的辦法就是修改渲染機(jī)制；
方案一（圖片加載完成之后，適配，但是這個(gè)方法并不好用）
代碼如下

win.t_img; // 定時(shí)器
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設(shè)為false，并退出each
        if(this.height === 0){
            win.isLoad = false;
            return false;
        }
    });
    // 為true，沒有發(fā)現(xiàn)為0的。加載完畢
    if(win.isLoad){
        clearTimeout(win.t_img); // 清除定時(shí)器
        // 回調(diào)函數(shù)
        callback();
    // 為false，因?yàn)檎业搅藳]有加載完成的圖，將調(diào)用定時(shí)器遞歸
    }else{
        win.isLoad = true;
        win.t_img = setTimeout(function(){
            win.isImgLoad(callback); // 遞歸掃描
        },500); // 我這里設(shè)置的是500毫秒就掃描一次，可以自己調(diào)整
    }
}

這段代碼會(huì)使底部留白出現(xiàn)的頻率降低，但是會(huì)影響iphone的加載，比如，圖片出來了一點(diǎn)點(diǎn)，下面被原生的遮住了，所以就想了另外一個(gè)方案
**方案二：
結(jié)構(gòu)加載的時(shí)候要隱藏結(jié)構(gòu)，適配完成之后再顯示出來**
直接正常加載，但是加載的時(shí)候要display:none;

像圖片中的這樣，但是因?yàn)槲业倪m配是提取{==$code=}代碼中的類名,獲取寬度做適配，當(dāng)父級(jí)display:none；子級(jí)的寬度是獲取不到的
mapWidth = document.querySelector(".partner_img_center").style.width;
H5中新增選擇器querySelector這個(gè)是能獲取到的，直接適配，然后顯示，這個(gè)就是我目前的解決方案；如果各位有更好的方案，請(qǐng)賜教！
注明：這個(gè)方法在背景圖片適配各個(gè)APP場(chǎng)景中，并且用zoom的方法做適配的時(shí)候用到的，請(qǐng)注意應(yīng)用場(chǎng)景，歡迎各位指出不足，我會(huì)加以指正~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/86203.html

相關(guān)文章

  • webview中嵌入部分html5適配的小方法~

    摘要：如果在客戶端嵌入整個(gè)的一般來說是沒有問題的，但是如果是某一段的嵌入到中，并且是后臺(tái)傳來的數(shù)據(jù)結(jié)構(gòu)并且是渲染，圖片是背景圖片，要適配手機(jī)適配方法是用的屬性適配，寬度獲取背景圖片的寬度這個(gè)是后臺(tái)傳值的時(shí)候就有的是會(huì)有想想不到的的，想要全屏展示， 如果在客戶端嵌入整個(gè)的html5一般來說是沒有問題的，但是如果是某一段的html5嵌入到webview中，并且是后臺(tái)傳來的數(shù)據(jù)結(jié)構(gòu)并且是PHP渲染...

    LdhAndroid 評(píng)論0 收藏0

  • WKWebView微信適配

    摘要：背景是微信將要從切換成，前端的頁面需要進(jìn)行適配。以往在做滾動(dòng)加載的組件時(shí)，微信內(nèi)的翻頁的時(shí)候老是要等待下一頁加載，現(xiàn)在終于不用等了。當(dāng)然也有坑，具體微信內(nèi)要怎么兼容看文檔。微信在，已經(jīng)開始灰度了，后續(xù)版本會(huì)全量。 WKWebView 背景是微信webview將要從UIWebView切換成WKWebView，前端的web頁面需要進(jìn)行適配。 什么是WKWebView 官方的解釋：WKWeb...

    olle 評(píng)論0 收藏0

  • HTML5 活動(dòng)宣傳頁「My Flyme 獨(dú)家記憶」開發(fā)實(shí)踐總結(jié)

    摘要：年前放假的最后一天，我們上線了獨(dú)家記憶活動(dòng)宣傳頁。微信分享主要代碼參考獨(dú)家記憶當(dāng)時(shí)光凝固，當(dāng)回憶定格。這是屬于我和的獨(dú)家記憶。 年前放假的最后一天，我們上線了「My Flyme 獨(dú)家記憶」 H5 活動(dòng)宣傳頁。 因種種原因，直到放假前幾天，才突然要求我們參與并開始項(xiàng)目的前端部分。此時(shí)大概的情況是：所有數(shù)據(jù)已計(jì)算完畢；后端接口已完成待聯(lián)調(diào)；交互視覺只出了不到四分之一(一共二十多個(gè)頁面)；我...

    Anonymous1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<