澳洲幸运5直播天天计划

核彈頭H5小游戲

關閉

核彈頭小游戲

游戲輕松點
無需下載,點開即玩

拿起手機!掃我啊

核彈頭小游戲
無需下載點擊即玩

回到頂部

當前位置: 核彈頭首頁 > 游戲教程 > 正文

html5怎么自適應屏幕大小源碼

來源:www.kseom.com.cn    作者:集   時間:2016-04-18

自適應屏幕大小是非常重要的,本文小編就為您詳解html5怎么自適應屏幕大小。
現今,各種手機屏幕,pad屏幕大小層出不窮啊,什么尺寸都有,那么我們弄一個頁面最好的當然是要能夠自適應啦。html5怎么自適應屏幕大小呢?本文小編就教你,源碼直接分享。

1、使用meta標簽,這也是普遍使用的方法,理論上講使用這個標簽是可以適應所有尺寸的屏幕的,但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。

首先解釋該標簽的含義:

meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果你完全不了解這個標簽的使用需要先百度一下。

解釋:content中的“width” 這個width指的是什么寬度,我看過的文章對這個都沒有解釋的很清楚,有幾個備選:虛擬窗口的寬度、手機屏幕的寬度、還是頁面的寬度等等?經試驗這個指的是虛擬窗口的寬度。了解寬度之后,對后續的各種scale,就應該知道是誰與誰的比例,是 虛擬窗口寬度 / 頁面寬度,這樣就會有問題出現安卓設備尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標簽只能支持一種尺寸,當然有些瀏覽器會自動縮放使其適應屏幕,但這不是統一標準,正確的做法是用js動態生成此標簽,當然,應該先獲取屏幕尺寸。

    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write(‘<meta name="viewport" content="width=640, 
                  minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘,
                   target-densitydpi=device-dpi">‘);
            }else{
                document.write(‘<meta name="viewport" content="width=640, 
                                          target-densitydpi=device-dpi">‘);
            }
        } else {
            document.write(‘<meta name="viewport" content="width=640, 
                                         user-scalable=no, 
                                        target-densitydpi=device-dpi">‘);
        }
    </script>

對于此標簽還有以下需要分享:

1)、user-scalable=no就一定可以保證頁面不可以縮放嗎?NO,有些瀏覽器不吃這一套,還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

2)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎?不一定,有些瀏覽器會將user-scalable理解為用戶手動縮放,如果user-scalable=no,initial-scale將無法生效。

3)、手機頁面可以觸摸移動,但是如果有需要禁止此操作,就是頁面寬度等于屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動。

4)、如果頁面是經過縮小適應屏幕寬度的,會出現一個問題,當文本框被激活(獲取焦點)時,頁面會放大至原來尺寸。

核彈頭小游戲網發布此文僅為傳遞信息,不代表認同其觀點或者證實其描述!
澳洲幸运5直播天天计划