一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法及裝置的制造方法
【專(zhuān)利摘要】本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，尤其是涉及一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法及裝置。包括：步驟1，客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)時(shí)，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)；步驟2，當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格時(shí)，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。因此，本發(fā)明具有如下優(yōu)點(diǎn)：兼容了網(wǎng)站范圍內(nèi)的自動(dòng)縮放和閾值下的差異化展示。優(yōu)化并了在前端宮格布局中的兼容性問(wèn)題，同時(shí)保證了交互的穩(wěn)定性和可靠性。
【專(zhuān)利說(shuō)明】一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法及裝置
[0001]
技術(shù)領(lǐng)域
[0002]本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，尤其是涉及一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法及裝置。
[0003]
【背景技術(shù)】
[0004]在網(wǎng)站中會(huì)有很多需要通過(guò)宮格展示的信息，如:圖片宮格、新聞宮格、視頻宮格等等。這樣做的好處是讓用戶一次性看到或操作到更多，并且提升功能或者內(nèi)容的曝光率。網(wǎng)站的內(nèi)容需要在不同分辨率下的瀏覽器進(jìn)行展示，有一些網(wǎng)站對(duì)于宮格展示沒(méi)有做自適應(yīng)處理，導(dǎo)致難看的滾動(dòng)條或者直接溢出隱藏等問(wèn)題，有一些網(wǎng)站對(duì)于宮格的自適應(yīng)簡(jiǎn)單粗暴，直接放大或縮小影響了用戶的操作。
[0005]
【發(fā)明內(nèi)容】
[0006]本發(fā)明主要是解決現(xiàn)有技術(shù)所存在的技術(shù)問(wèn)題;提供了一種兼容了網(wǎng)站范圍內(nèi)的自動(dòng)縮放和閾值下的差異化展示。優(yōu)化并了在前端宮格布局中的兼容性問(wèn)題，同時(shí)保證了交互的穩(wěn)定性和可靠性的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法及裝置。
[0007]本發(fā)明的上述技術(shù)問(wèn)題主要是通過(guò)下述技術(shù)方案得以解決的:
一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，其特征在于，包括:
步驟1，在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)；；
步驟2，當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。
[0008]優(yōu)選地，所述步驟2中，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth;基礎(chǔ)分辨率的高為ScreenBaseHeight;基礎(chǔ)宮格的寬為GridBaseWidth;基礎(chǔ)宮格的高為GridBaseHeight ；當(dāng)前分辨率的寬為ScreenCurWidth;當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式:
變換后宮格寬為:
GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一變換后宮格尚為:
GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二所述基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。
[0009]優(yōu)選地，所述步驟2中，當(dāng)客戶端瀏覽器分辨率大于基礎(chǔ)分辨率時(shí)，宮格在客戶端瀏覽器顯示時(shí)維持基礎(chǔ)宮格的寬高。
[0010]優(yōu)選地，所述步驟2中，設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是:
當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。
[0011 ] —種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，包括:
分辨率數(shù)據(jù)檢測(cè)模塊:在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)；
分辨率實(shí)時(shí)匹配模塊:當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，分辨率實(shí)時(shí)匹配模塊自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。
[0012]優(yōu)選地，分辨率實(shí)時(shí)匹配模塊自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth;基礎(chǔ)分辨率的高為ScreenBaseHeight;基礎(chǔ)宮格的寬為GridBaseWidth;基礎(chǔ)宮格的高為GridBaseHeight ；當(dāng)前分辨率的寬為ScreenCurWidth;當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式:
變換后宮格寬為:
GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一變換后宮格尚為:
GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二所述基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。
[0013]優(yōu)選地，分辨率實(shí)時(shí)匹配模塊自動(dòng)放大或縮小時(shí)，當(dāng)客戶端瀏覽器分辨率大于基礎(chǔ)分辨率時(shí)，宮格在客戶端瀏覽器顯示時(shí)維持基礎(chǔ)宮格的寬高。
[0014]優(yōu)選地，通過(guò)分辨率實(shí)時(shí)匹配模塊自動(dòng)放大或縮小設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是:
當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。
[0015]因此，本發(fā)明具有如下優(yōu)點(diǎn):兼容了網(wǎng)站范圍內(nèi)的自動(dòng)縮放和閾值下的差異化展示。優(yōu)化并了在前端宮格布局中的兼容性問(wèn)題，同時(shí)保證了交互的穩(wěn)定性和可靠性。
[0016]
【附圖說(shuō)明】
[0017]附圖1是本發(fā)明實(shí)施例1中當(dāng)分辨率等于預(yù)先設(shè)定的閾值時(shí)的縮放效果示意圖。
[0018]附圖2是本發(fā)明實(shí)施例1中當(dāng)分辨率小于某一個(gè)預(yù)先設(shè)定的閾值時(shí)的縮放效果示意圖。
[0019]附圖3是本發(fā)明的結(jié)構(gòu)框圖。
[0020]
【具體實(shí)施方式】
[0021]下面通過(guò)實(shí)施例，并結(jié)合附圖，對(duì)本發(fā)明的技術(shù)方案作進(jìn)一步具體的說(shuō)明。
[0022]—種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，包括:
步驟1，在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)；
步驟2，當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。其中，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth;基礎(chǔ)分辨率的高為 ScreenBaseHeight;基礎(chǔ)宮格的寬為GridBaseWidth ；基礎(chǔ)宮格的高為GridBaseHeight;當(dāng)前分辨率的寬為ScreenCurWidth;當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式:
變換后宮格寬為:
GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一變換后宮格尚為:
GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二所述基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。
[0023]需要注意的是:在分辨率極小或極大的情況下，宮格可能同時(shí)極小或極大，這樣不僅會(huì)導(dǎo)致視覺(jué)上錯(cuò)亂，而且會(huì)影響功能的正常使用。這時(shí)，可以設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是:
當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。
[0024]
一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，包括:
分辨率數(shù)據(jù)檢測(cè)模塊:在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)； 分辨率實(shí)時(shí)匹配模塊:當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，分辨率實(shí)時(shí)匹配模塊自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。其中，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth ;基礎(chǔ)分辨率的高為ScreenBaseHeight;基礎(chǔ)宮格的寬為GridBaseWidth;基礎(chǔ)宮格的高為GridBaseHeight ；當(dāng)前分辨率的寬為ScreenCurWidth;當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式:
變換后宮格寬為:
GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一變換后宮格尚為:
GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。
[0025]需要注意的是:在分辨率極小或極大的情況下，宮格可能同時(shí)極小或極大，這樣不僅會(huì)導(dǎo)致視覺(jué)上錯(cuò)亂，而且會(huì)影響功能的正常使用。這時(shí)可以通過(guò)分辨率實(shí)時(shí)匹配模塊自動(dòng)放大或縮小設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是:
當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示；
當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。
[0026]
實(shí)施例1:
本發(fā)明提供一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，包括:
步驟1，先設(shè)定一個(gè)基礎(chǔ)分辨率(如:1920*1400)，這是為了保證有一個(gè)參照狀態(tài)供其他分辨率的自動(dòng)適應(yīng)計(jì)算。定義如下變量:
基礎(chǔ)分辨率的寬:ScreenBaseffidth 基礎(chǔ)分辨率的高:ScreenBaseHeight 基礎(chǔ)宮格的寬:GridBaseWidth 基礎(chǔ)宮格的高:GridBaseHeight 當(dāng)前分辨率的寬:ScreenCurWidth 當(dāng)前分辨率的高:ScreenCurHeight
步驟2，客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)時(shí)，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)；
步驟3，當(dāng)分辨率切換(如:1600*1200)，此時(shí)需要進(jìn)過(guò)比例換算出宮格新的大小，換算公式如下:
宮格寬=GridBaseWidth * ScreenCurffidth / ScreenBaseffidth宮格高=GridBaseHeight * ScreenCurHeight / ScreenBaseHeight 步驟4，但是在分辨率極小或極大的情況下，宮格可能同時(shí)極小或極大，這樣不僅會(huì)導(dǎo)致視覺(jué)上錯(cuò)亂，而且會(huì)影響功能的正常使用。這里需要做兼容性處理:
1、當(dāng)分辨率大于基礎(chǔ)分辨率，宮格不在進(jìn)行放大，保持基礎(chǔ)的大小
2、當(dāng)分辨率小于某一個(gè)預(yù)先設(shè)定的閾值，進(jìn)行差異化展示:
如圖1所示，假設(shè)當(dāng)前分辨率為1200 * 900且預(yù)先設(shè)定的閾值也是這個(gè)，那就會(huì)犧牲一定的內(nèi)容，保證宮格的展示和交互正常。另外，可以設(shè)置多個(gè)閾值來(lái)控制宮格在行和列的展示格式和大小，如800 * 600分辨率下，處理結(jié)果如圖2所示。
[0027]
實(shí)施例2
本發(fā)明提供一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，該裝置與實(shí)施例1中提供的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法一一對(duì)應(yīng)，在此不再贅述。
[0028]本文中所描述的具體實(shí)施例僅僅是對(duì)本發(fā)明精神作舉例說(shuō)明。本發(fā)明所屬技術(shù)領(lǐng)域的技術(shù)人員可以對(duì)所描述的具體實(shí)施例做各種各樣的修改或補(bǔ)充或采用類(lèi)似的方式替代，但并不會(huì)偏離本發(fā)明的精神或者超越所附權(quán)利要求書(shū)所定義的范圍。
【主權(quán)項(xiàng)】
1.一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，其特征在于，包括: 步驟I，在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)； 步驟2，當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。2.根據(jù)權(quán)利要求1所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，其特征在于，所述步驟2中，自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth;基礎(chǔ)分辨率的高為ScreenBaseHeight;基礎(chǔ)宮格的寬為GridBaseffidth ；基礎(chǔ)宮格的高為GridBaseHeight ；當(dāng)前分辨率的寬為ScreenCurWidth ；當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式: 變換后宮格寬為: GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一 變換后宮格尚為: GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二 所述基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。3.根據(jù)權(quán)利要求2所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，其特征在于，所述步驟2中，當(dāng)客戶端瀏覽器分辨率大于基礎(chǔ)分辨率時(shí)，宮格在客戶端瀏覽器顯示時(shí)維持基礎(chǔ)宮格的寬高。4.根據(jù)權(quán)利要求2所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互方法，其特征在于，所述步驟2中，設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是: 當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示； 當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示； 當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。5.一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，其特征在于，包括: 分辨率數(shù)據(jù)檢測(cè)模塊:在客戶端通過(guò)后臺(tái)服務(wù)器調(diào)取的原始網(wǎng)站內(nèi)容在客戶端瀏覽器上呈現(xiàn)后，后臺(tái)服務(wù)器實(shí)時(shí)監(jiān)測(cè)客戶端瀏覽器的分辨率數(shù)據(jù)； 分辨率實(shí)時(shí)匹配模塊:當(dāng)原始網(wǎng)站存在圖片宮格、或新聞宮格、或視頻宮格后，后臺(tái)服務(wù)器實(shí)時(shí)匹配客戶端瀏覽器分辨率與原始網(wǎng)站分辨率數(shù)據(jù)，當(dāng)客戶端瀏覽器分辨率大于或小于原始網(wǎng)站分辨率時(shí)，分辨率實(shí)時(shí)匹配模塊自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小后顯示在客戶端瀏覽器上。6.根據(jù)權(quán)利要求5所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，其特征在于，分辨率實(shí)時(shí)匹配模塊自動(dòng)對(duì)原始網(wǎng)站中的宮格放大或縮小包括，定義基礎(chǔ)分辨率為M*N，然后定義參數(shù):基礎(chǔ)分辨率的寬為ScreenBaseWidth ；基礎(chǔ)分辨率的高為ScreenBaseHeight ；基礎(chǔ)宮格的寬為GridBaseWidth;基礎(chǔ)宮格的高為GridBaseHeight;當(dāng)前分辨率的寬為ScreenCurWidth;當(dāng)前分辨率的高為ScreenCurHeight;則，單個(gè)宮格需要放大或縮小的數(shù)據(jù)基于以下公式: 變換后宮格寬為: GridBaseffidth 氺 ScreenCurffidth / ScreenBaseffidth； 式一 變換后宮格尚為: GridBaseHeight * ScreenCurHeight / ScreenBaseHeight ； 式二 所述基礎(chǔ)宮格為后臺(tái)服務(wù)器原始網(wǎng)站中宮格的原始高、寬數(shù)據(jù)。7.根據(jù)權(quán)利要求6所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，其特征在于，分辨率實(shí)時(shí)匹配模塊自動(dòng)放大或縮小時(shí)，當(dāng)客戶端瀏覽器分辨率大于基礎(chǔ)分辨率時(shí)，宮格在客戶端瀏覽器顯示時(shí)維持基礎(chǔ)宮格的寬高。8.根據(jù)權(quán)利要求6所述的一種前端實(shí)現(xiàn)自適應(yīng)宮格的交互裝置，其特征在于，通過(guò)分辨率實(shí)時(shí)匹配模塊自動(dòng)放大或縮小設(shè)定分辨率閾值，當(dāng)分辨率小于分辨率閾值，進(jìn)行差異化展示，具體是: 當(dāng)客戶端瀏覽器分辨率小于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，并在客戶端瀏覽器顯示； 當(dāng)客戶端瀏覽器分辨率等于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，刪除不能顯示完全的宮格列數(shù)或行數(shù)后，在客戶端瀏覽器顯示； 當(dāng)客戶端瀏覽器分辨率大于分辨率閾值時(shí)，采用式一和式二變換宮格參數(shù)，維持基礎(chǔ)宮格的寬高并在客戶端瀏覽器顯示。
【文檔編號(hào)】G06F17/30GK105975635SQ201610467496
【公開(kāi)日】2016年9月28日
【申請(qǐng)日】2016年6月24日
【發(fā)明人】杜偉
【申請(qǐng)人】武漢斗魚(yú)網(wǎng)絡(luò)科技有限公司