HTML5自適應手機螢幕

阿新 • • 發佈：2019-01-30

從網上學到的自適應程式碼，用於HighCharts報表
使用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>

完整html程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title 
>ChartTestDemo</title>
    <script src="./jquery/jquery.min.js"></script>
    <script src="./highcharts/highcharts.js"></script>
    <script src="./highcharts/modules/exporting.js"></script>
    <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>
</head>
<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script type="text/javascript">
        $(function() {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title : {
                  text: '資訊渠道人數'   
                },
                subtitle : {
                  text: 'Source: WYM'  
                },
                xAxis : {
                  categories: ['自營','網際網路','戶外','自然','自媒體','框架','400','其他'],
                  crosshair: true
                },
                yAxis : {
                    min: 0,
                    title: {
                        text: '人數(個)'
                    }   
                },
                tooltip : {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}人</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions : {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },  
                credits : {
                    enabled: false
                },

                series: [{
                    name: '男',
                        data: [0, 7, 1, 2, 0, 3, 2, 1]
                    }, {
                        name: '女',
                        data: [3, 43, 14, 13, 9, 9, 3, 3]
                }]
            });
        });
    </script>
</body>
</html>

記錄下來，以便以後使用

移動頁面HTML5自適應手機螢幕寬度

http://www.mamicode.com/info-detail-864013.html 標籤：網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。 1、使用meta標籤，這也是普遍使用的方法，理論上講使用這個

移動頁面HTML5自適應手機螢幕寬度幾種辦法

http://www.mamicode.com/info-detail-864013.html 標籤：網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。 1、使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，

HTML5自適應手機螢幕

從網上學到的自適應程式碼，用於HighCharts報表使用js進行自適應控制，程式碼如下： <script type="text/javascript"> var

HTML5 移動頁面自適應手機螢幕四類方法

1、使用meta標籤：viewport H5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。 viewport 是使用者網頁的可視區域。翻譯為中文可以叫做"

HTML5 移動頁面自適應手機螢幕四種方法

1、使用meta標籤：viewport H5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。 viewport 是使用者網頁的可視區域。翻譯為中文可以叫做"視區"

canvas 單位問題類似rem和rpx自適應手機螢幕寬度

//index.js//獲取應用例項var app = getApp()var H = 750;var W = 750;function dawLine(context){ for(var i = 0; i < 20; i++){ //線條寬度 context.setLineWidth(1

使PC端網頁寬度自適應手機螢幕大小

有時候我們會糾結PC頁面在手機頁面上無法正常顯示，超出螢幕，有些內容看不到，現在又了下面的程式碼，可以做到自適應手機螢幕寬度：在網頁的<head>中增加一個meta標籤： <meta name=”viewport” content=”width=d

android webview載入html圖片自適應手機螢幕大小&點選檢視大圖

我們在開發中，顯示資訊詳情時，一般後臺會給出html文字，在Android端一般採用webview控制元件來展示，但是後臺給出的html文字一般是給電腦端用的，沒有自適配手機，導致手機端圖片顯示過大，需要左右移動來檢視全圖。下面給出幾種實用方法，達到在手機端用webvi

Android網頁寬度自適應手機螢幕寬度的方法

一、設定網頁寬度自動調整這個比較簡單，只需要在網頁程式碼的頭部內加入一行viewport元標籤。 <meta name="viewport" content="width=device-w

Webview--如何讓載入進來的頁面自適應手機螢幕解析度

讓Webview載入的頁面居中顯示有我知道的倆種方法第一種： WebSettings settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_C

html5 video視訊標籤自適應手機樣式

css .vid-wrap{ width:100%;background: #000; position:relative; padding-bottom:56.25%;

網頁自適應手機、計算機螢幕的設定方法

隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下；PC的螢幕寬度，一般都在1000畫素以上（目前主流寬度是1366×768），有的還達到

百度富文本自適應手機屏幕方法

不能設置 log 限制寬度縮放我們渲染 www. 百度編輯器中添加的圖片在手機端不能自適應問題做網站經常要用到百度編輯器，頁面的渲染我們一般用{$content}來顯示，這時候在手機端就會出現首先寬度過寬超過手機尺寸的問題，用max-width:100%;限制之後

杏彩時時彩源碼下載新增騰訊分分彩+H5自適應手機版

images admin bsp fig 引擎 asc mage 支持 alt 安裝說明：1分別修改web、admin、wap 目錄下的xingcai_config、admin.config、xingcai_config數據庫連接信息2修改開獎目錄下的的數據庫連接信息con

JeeSite 4.0 彩38完整修復版+H5自適應手機版網站開發環境部署運行調試

res not amp charset collate 3.3 end 最好 mapper 環境要求 1、彩38完整源碼下載+帶H5自適應手機版下載 2、話仙源碼論壇下載 3、Apache Maven 3.3+ 下載 4、MySql 5.7+ 下載導入到Eclipse 1

彩38完整源碼下載+帶H5自適應手機版

ado 文件夾 alt php文件設置 sql admin amp 演示彩38完整源碼下載+帶H5自適應手機版源碼下載Q:2947702644運行環境：WIN+APACHE+PHP5.4+MYSQL5.6+偽靜態源碼授權：無加密文件及認證授權，永久性可直接使用。版本支持

如何制作一個自適應手機、電腦、ipad的網頁方法總結大全

常見 ive sid 目前區塊 right UNC 增加自動今天春哥技術博客和大家一起分享下當下如何制作一個自適應手機、電腦、ipad的網頁方法，手機上網的用戶已經越來越多，已經趕超PC端。隨著2G、3G、4G、免費WIFI和無線基站的不斷普及，越來越多的人開始使用手

網頁自適應電腦螢幕大小

1.網頁寬度自適應，需要把網頁元素寬度設定為百分比，還要在網頁頭部加上程式碼： <meta name="viewport" content="width=device-width,initial-scale=1.0" />　 width=device-width ：寬度等於裝置螢幕的寬度

rem自適應手機端佈局

通過js根據螢幕裝置尺寸的大小，改變根元素的值： <script> var html = document.querySelector("html"); var rem = html.offsetWidth / 7.5; html.style.fontSize = rem + "px"

Android學習第7篇——碎片實踐，結合ListView的簡單閱讀應用，自適應手機和平板

在學過了碎片(Fragment)、ListView之後，實現一個自適應手機和平板的文章閱讀應用效果圖：手機：平板：二、實現過程：1、新建一個文章實體類Newspublic class News { private String title; private

HTML5自適應手機螢幕

相關推薦