，即:終端可以通過CSS3中的參數(shù)信息device-pixel-rat1或/和dppx來判斷本終端的屏幕分辨率等級(jí)。
[0109]假設(shè)屏幕分辨率等級(jí)包括高清屏幕和普通屏幕兩個(gè)等級(jí)，當(dāng)device-pixel-rat1的值等于第一設(shè)定值(如等于2)或/和dppx大于或等于預(yù)設(shè)值時(shí)，判斷本終端的屏幕為高清屏幕；當(dāng)device-pixel-rat1的值等于第二設(shè)定值(如等于1)或/和dppx小于預(yù)設(shè)值時(shí)，判斷本終端的屏幕為普通屏幕。
[0110]舉例而言，終端在加載頁面上封裝好函數(shù)，通過CSS3中的屬性webkit-min-device-pixel-rat1 和 min-resolut1n: 1.5dppx 參數(shù)，來判斷是否是高清屏幕(如retina5K屏幕)。當(dāng)device-pixel-rat1 = 1時(shí)，則為普通屏幕，當(dāng)device-pixel-rat1 = 2時(shí)，貝lj為高清屏幕；同時(shí)，普通屏幕的分辨率通常為96dpi，高清屏幕的分辨率通常大于192dpi，192dpi等于2dppx，可以據(jù)此設(shè)定dppx的預(yù)設(shè)值來判斷屏幕分辨率等級(jí)，或者通過設(shè)置最小值min-resolut1n:1.5dppx，只要dppx大于或等于L 5就是高清屏幕，小于1.5就是普通屏幕。作為優(yōu)選，當(dāng)device-pixel-rat1 = 2，且dppx大于或等于1.5時(shí)，則判斷為高清屏幕，當(dāng)device-pixel-rat1 = 1，且dppx小于1.5時(shí)，則判斷為普通屏幕。
[0111]S32、根據(jù)屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片。
[0112]假設(shè)屏幕分辨率等級(jí)包括高清屏幕和普通屏幕，對(duì)應(yīng)的圖片規(guī)格分別為高清圖片和普通圖片。終端則在加載頁面寫入普通src地址和高清src地址(如src [data_src])；當(dāng)屏幕分辨率等級(jí)為高清屏幕時(shí)，利用高清src地址的值覆蓋普通src地址的值，以加載高清圖片；當(dāng)屏幕分辨率等級(jí)為普通屏幕時(shí)，利用普通src地址的值來顯示地址，即利用普通src地址作為加載地址，以加載普通圖片。
[0113]假設(shè)屏幕分辨率等級(jí)包括超高清屏幕、高清屏幕和普通屏幕，對(duì)應(yīng)的圖片規(guī)格分別為超高清圖片、高清圖片和普通圖片。終端則在加載頁面寫入普通src地址、高清src地址和超高清src地址；當(dāng)屏幕分辨率等級(jí)為超高清屏幕時(shí)，利用超高清src地址的值覆蓋普通src地址的值，以加載超高清圖片；當(dāng)屏幕分辨率等級(jí)為高清屏幕時(shí)，利用高清src地址的值覆蓋普通src地址的值，以加載高清圖片；當(dāng)屏幕分辨率等級(jí)為普通屏幕時(shí)，利用普通src地址的值來顯示地址，以加載普通圖片。
[0114]如圖6所示，提出本發(fā)明的方法根據(jù)屏幕分辨率加載圖片的方法第四實(shí)施例，所述方法應(yīng)用于終端，包括以下步驟:
[0115]S41、判斷是否是高清屏幕。
[0116]本步驟S41中，終端通過瀏覽器或其它應(yīng)用加載圖片時(shí)，首先判斷本終端的屏幕分辨率等級(jí)屬于哪一個(gè)等級(jí)，是否為高清屏幕。
[0117]具體的，終端獲取CSS3(層疊樣式表3，Cascading Stylesheet 3)中的參數(shù)信息，根據(jù)參數(shù)信息判斷本終端的屏幕分辨率等級(jí)。CSS3中的參數(shù)信息包括device-pixel-rat1 (物理像素和設(shè)備獨(dú)立像素的比例)或/和dppx (每像素包含點(diǎn)的數(shù)量，dots per pixel)，即:終端可以通過CSS3中的參數(shù)信息device-pixel-rat1或/和dppx來判斷本終端的屏幕分辨率等級(jí)。例如:當(dāng)device-pixel-rat1的值等于第一設(shè)定值(如等于2)或/和dppx大于或等于預(yù)設(shè)值(如1.5)時(shí)，判斷本終端的屏幕為高清屏幕；當(dāng)device-pixel-rat1的值等于第二設(shè)定值(如等于1)或/和dppx小于預(yù)設(shè)值(如1.5)時(shí)，判斷本終端的屏幕為普通屏幕。
[0118]S42、加載高清圖片。
[0119]具體的，終端在加載頁面寫入普通src地址和高清src地址(如src [data_src])，當(dāng)屏幕分辨率等級(jí)為高清屏幕時(shí)，利用高清src地址的值覆蓋普通src地址的值，以加載高清圖片。
[0120]S43、加載普通圖片。
[0121]具體的，終端在加載頁面寫入普通src地址和高清src地址(如src [data_src])，當(dāng)屏幕分辨率等級(jí)為普通屏幕時(shí)，利用普通src地址的值來顯示地址，即利用普通src地址作為加載地址，以加載普通圖片。
[0122]本發(fā)明根據(jù)屏幕分辨率加載圖片的方法，服務(wù)器首先根據(jù)屏幕分辨率等級(jí)定義兩種或多種質(zhì)量規(guī)格的圖片，終端加載圖片時(shí)，則根據(jù)本終端的屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片，從而實(shí)現(xiàn)了按需加載不同質(zhì)量規(guī)格的圖片，不同屏幕分辨率的終端加載不同質(zhì)量規(guī)格的圖片，提高了頁面渲染速度，提高了網(wǎng)站性能，并大大節(jié)約了帶寬資源。同時(shí)，判斷運(yùn)算和圖片渲染都在終端上完成，節(jié)約了服務(wù)器資源。
[0123]本發(fā)明的方法在具體實(shí)現(xiàn)上，可以利用js腳本語言在客戶端的優(yōu)勢，配合html語言，生成兩種(或多種)圖片地址，分別用不同的字段表示，用腳本語言封裝好函數(shù)，根據(jù)屏幕分辨率等級(jí)加載相應(yīng)質(zhì)量規(guī)格的圖片，例如:如果是高清屏，就加載高清圖片，如果是普通屏，就加載普通圖片。本發(fā)明實(shí)施例利用腳本語言和html注入寫法，方便維護(hù)和添加字段，方便前臺(tái)添加圖片，尤其適用于需要支持高清屏的項(xiàng)目，有利于樹立品牌形象。
[0124]本發(fā)明進(jìn)一步提供一種根據(jù)屏幕分辨率加載圖片的系統(tǒng)，如圖7所示，所述系統(tǒng)包括服務(wù)器和終端，其中:
[0125]服務(wù)器:用于根據(jù)屏幕分辨率等級(jí)存儲(chǔ)至少兩種規(guī)格的圖片。
[0126]具體的，服務(wù)器根據(jù)屏幕分辨率等級(jí)將圖片定義為至少兩種規(guī)格，制作并存儲(chǔ)至少兩種規(guī)格的圖片，每一個(gè)屏幕分辨率等級(jí)對(duì)應(yīng)一種規(guī)格的圖片，假設(shè)屏幕分辨率等級(jí)有N級(jí)，則存儲(chǔ)N中規(guī)格的圖片，N大于等于2。
[0127]例如，屏幕分辨率等級(jí)包括高清屏幕和普通屏幕兩個(gè)等級(jí)，服務(wù)器則存儲(chǔ)高清圖片和普通圖片兩種規(guī)格的圖片。又如，屏幕分辨率等級(jí)包括超高清屏幕、高清屏幕和普通屏幕三個(gè)等級(jí)，服務(wù)器則存儲(chǔ)超高清圖片、高清圖片和普通圖片三種規(guī)格的圖片。
[0128]終端:用于當(dāng)加載圖片時(shí)，判斷本終端的屏幕分辨率等級(jí)，根據(jù)屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片。
[0129]終端通過瀏覽器或其它應(yīng)用加載圖片時(shí)，首先判斷本終端的屏幕屬于哪一個(gè)屏幕分辨率等級(jí)，再根據(jù)屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片。
[0130]具體的，終端獲取CSS3中的參數(shù)信息，根據(jù)參數(shù)信息判斷本終端的屏幕分辨率等級(jí)。CSS3中的參數(shù)信息包括device-pixel-rat1或/和dppx,即:終端可以通過CSS3中的參數(shù)信息device-pixel-rat1或/和dppx判斷本終端的屏幕分辨率等級(jí)。
[0131]假設(shè)屏幕分辨率等級(jí)包括高清屏幕和普通屏幕兩個(gè)等級(jí)，當(dāng)device-pixel-rat1的值等于第一設(shè)定值(如等于2)或/和dppx大于或等于預(yù)設(shè)值時(shí)，判斷本終端的屏幕為高清屏幕；當(dāng)device-pixel-rat1的值等于第二設(shè)定值(如等于1)或/和dppx小于預(yù)設(shè)值時(shí)，判斷本終端的屏幕為普通屏幕。
[0132]舉例而言，終端在加載頁面上封裝好函數(shù)，通過CSS3中的屬性webkit-min-device-pixel-rat1 和 min-resolut1n: 1.5dppx 參數(shù)，來判斷是否是高清屏幕(如retina5K屏幕)。當(dāng)device-pixel-rat1 = 1時(shí)，則為普通屏幕，當(dāng)device-pixel-rat1 = 2時(shí)，貝lj為高清屏幕；同時(shí)，普通屏幕的分辨率通常為96dpi，高清屏幕的分辨率通常大于192dpi，192dpi等于2dppx，可以據(jù)此設(shè)定dppx的預(yù)設(shè)值來判斷屏幕分辨率等級(jí)，或者通過設(shè)置最小值min-resolut1n:1.5dppx，只要dppx大于或等于L 5就是高清屏幕，小于1.5就是普通屏幕。作為優(yōu)選，當(dāng)device-pixel-rat1 = 2，且dppx大于或等于1.5時(shí)，則判斷為高清屏幕，當(dāng)device-pixel-rat1 = 1，且dppx小于1.5時(shí)，則判斷為普通屏幕。
[0133]終端根據(jù)屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片時(shí)，具體可通過以下方式實(shí)現(xiàn):
[0134]假設(shè)屏幕分辨率等級(jí)包括高清屏幕和普通屏幕，對(duì)應(yīng)的圖片規(guī)格分別為高清圖片和普通圖片。終端則在加載頁面寫入普通src地址和高清src地址(如src [data_src])；當(dāng)屏幕分辨率等級(jí)為高清屏幕時(shí)，利用高清src地址的值覆蓋普通src地址的值，以加載高清圖片；當(dāng)屏幕分辨率等級(jí)為普通屏幕時(shí)，利用普通src地址的值來顯示地址，即利用普通src地址作為加載地址，以加載普通圖片。
[0135]假設(shè)屏幕分辨率等級(jí)包括超高清屏幕、高清屏幕和普通屏幕，對(duì)應(yīng)的圖片規(guī)格分別為超高清圖片、高清圖片和普通圖片。終端則在加載頁面寫入普通src地址、高清src地址和超高清src地址；當(dāng)屏幕分辨率等級(jí)為超高清屏幕時(shí)，利用超高清src地址的值覆蓋普通src地址的值，以加載超高清圖片；當(dāng)屏幕分辨率等級(jí)為高清屏幕時(shí)，利用高清src地址的值覆蓋普通src地址的值，以加載高清圖片；當(dāng)屏幕分辨率等級(jí)為普通屏幕時(shí)，利用普通src地址的值來顯示地址，即利用普通src地址作為加載地址，以加載普通圖片。
[0136]本發(fā)明根據(jù)屏幕分辨率加載圖片的系統(tǒng)，由服務(wù)器根據(jù)屏幕分辨率等級(jí)定義兩種或多種質(zhì)量規(guī)格的圖片，終端加載圖片時(shí)，則根據(jù)本終端的屏幕分辨率等級(jí)加載相應(yīng)規(guī)格的圖片，從而實(shí)現(xiàn)了按需加載不同質(zhì)量規(guī)格的圖片，不同屏幕分辨率的終端加載不同質(zhì)量規(guī)格的圖片，提高了頁面渲染速度，提高了網(wǎng)站性能，并大大節(jié)約了帶寬資源。同時(shí)，判斷運(yùn)算和圖片渲染都在終端上完成，節(jié)約了服務(wù)器資源。
[0137]本發(fā)明的系統(tǒng)在具體實(shí)現(xiàn)上，終端可以利用js腳本語言在客戶端的優(yōu)勢，配合html語言，生成兩種(或多種)圖片地址，分別