那些曾經遇到的問題點

時間 2019-11-17

標籤那些曾經遇到問題简体版

原文原文鏈接

1、經常使用 meta 標籤的做用

H5 項目中可能用到的 <meta> 標籤javascript

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<!-- target-densitydpi=device-dpi 使用屏幕自帶的dpi 不進行縮放 -->
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!--uc瀏覽器判斷到頁面上文字居多時，會自動放大字體優化移動用戶體驗。添加如下頭部能夠禁用掉該優化-->
<meta name="wap-font-scale" content="no">
複製代碼

2、在微信中 audio 自動播放音樂

參考網址：www.zhihu.com/question/25…css
以前 H5 中使用：html

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');            
        audio.play();        
        document.addEventListener("WeixinJSBridgeReady", function () {            
            audio.play();        
        }, false);    
    }    
    audioAutoPlay();
});
複製代碼

3、問題點彙總

一、彈性佈局vue

display：flex兼容的瀏覽器版本 IE 10+，Firefox 22+，Chrome 21+，Safira 6.1+，Opera 12.1+java

flex-wrap IE 11+，Firefox 28+，Chrome 29+，Safira 9+，Opera 17+node

目前沒有找到解決flex-wrap兼容性的方法，建議：不使用彈性佈局，給子元素添加 inline-blockreact

二、多行文本溢出隱藏並將隱藏部分換成省略號jquery

單行溢出文本顯示省略號

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複製代碼

多行文本溢出顯示省略號，webkit私有屬性，僅支持webkit瀏覽器

overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2; /*須要顯示的行數*/
-webkit-box-orient: vertical;
border: 1px solid #ddd;
複製代碼

三、背景色在IE8的兼容性(包括漸變色)android
- 簡單的透明度ios
  
  chrome && firefox background: #000; opacity: 0.5;
  
  IE8: filter:alpha(opacity=50);
- 二、漸變的背景色 (下面的例子是水平方向的線性漸變)
  
  chrome && firefox && Trident background-image: -webkit-linear-gradient(0, #2babe0 33%, #1373bd 66%); background-image: -moz-linear-gradient(0, #2babe0 33%, #1373bd 66%); background-image: -o-linear-gradient(0, #2babe0 33%, #1373bd 66%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#2babe0, endColorstr=#1373bd); /IE<9>/ -ms-filter: progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#2babe0, endColorstr=#1373bd); /IE8+/
四、break & continue

break 語句可跳出循環後，會繼續執行循環以後的代碼； break 不帶標籤引用時，只能用在循環或switch中；在循環多，結構複雜的時候會用帶標籤的break，指定跳出js代碼塊(循環、if語句及代碼塊)。

continue 語句中斷循環中的迭代，若出現了指定條件，而後繼續循環中的下一代迭代，且continue僅能用於循環中。

break & continue 區別 :
```
var x = 0;
while(x++ < 10) { if(x == 3) { break; } console.log(x); } // 1,2 var x = 0; while(x++ < 10) { if(x == 3) { continue; } console.log(x); } // 1,2,4,5,6,7,8,9,10 複製代碼
```
五、CSS3中的相鄰兄弟選擇器 + 方便之處

選擇當前類元素後相鄰的其餘兄弟元素，列表中只須要將每兩個元素之間或者當前元素之後元素設置10px的間距/邊框時(nth-child(n)不兼容IE8)
六、background-attachment

設置背景圖像是否固定或者隨着頁面的其他部分滾動的效果。

scroll 默認值，背景圖像會隨着頁面其他部分滾動 fixed 當頁面的其他部分滾動時，背景圖像不會移動 inherit 規定應該從父元素繼承background-attachment屬性的設置 (不兼容IE8) none | text | all | element 默認值 text 能夠選擇文本 none 文本不能被選擇 all 當全部內容做爲一個總體時能夠被選擇，若是雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。 element 能夠選擇文本，可是選擇範圍受元素邊界約束 IE6-9不支持該屬性，但支持使用標籤屬性 onselectstart="return false;" 來達到 user-select:none 的效果； Safari和Chrome也支持該標籤屬性；直到Opera12.5仍然不支持該屬性，但和IE6-9同樣，也支持使用私有的標籤屬性 unselectable="on" 來達到 user-select:none的效果；unselectable 的另外一個值是 off；除Chrome和Safari外，在其它瀏覽器中，若是將文本設置爲 -ms-user-select:none;則用戶將沒法在該文本塊中開始選擇文本。不過，若是用戶在頁面的其餘區域開始選擇文本，則用戶仍然能夠繼續選擇將文本設置爲 -ms-user-select:none; 的區域文本；
七、自定義滾動條樣式

/三角箭頭的顏色/ scrollbar-arrow-color: #bbb; /滾動條滑塊按鈕的顏色/ scrollbar-face-color: #999; /滾動條總體顏色/ scrollbar-highlight-color: #999; /滾動條陰影/ scrollbar-shadow-color: #999; /滾動條軌道顏色/ scrollbar-track-color: #eee; /* 滾動條總體樣式 */

div::-webkit-scrollbar {
    width: 6px; /* 高寬分別對應橫豎滾動條的尺寸 */
    height: 1px;
}
/* 滾動條裏面小方塊 */
div::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #999;
}
/* 滾動條裏面軌道 */
div::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #f2f2f2;
}
複製代碼

八、parseInt(string, radix)

string 必需。要被解析的字符串

radix 可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以「0x」或「0X」開頭，將以 16 爲基數。若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

返回解析後的數字。
九、RegExp對象的方法
- test()
  
  檢索字符串中的指定值，返回值是true或false var RegExp1 = new RegExp('e'); console.log(RegExp1.test('This is egg')); // true
- exec()
  
  檢索字符串中的指定值，返回值是被找到的值,返回一個數組，其中存放區配的結果，若是未找到區配，則返回值爲null
  
  var str = "Visit W3School"; var patt = new RegExp("W3School","g"); console.log(patt.exec(str)); // W3School console.log(patt.lastIndex); // 14
- compile()
  
  用於改變RegExp，既能夠改變檢索模式，也能夠添加或刪除第二個參數，存在返回 true,不然返回 false
  
  語法：RegExpObject.compile(regexp,modifier) regexp 正則表達式 modifier 規定匹配的類型。"g" 用於全局匹配，"i" 用於區分大小寫，"gi" 用於全局區分大小寫的匹配。
  
  經過 compile() 方法，改變正則表達式，用 "person" 替換 "man" 或 "woman"， var str="Every man in the world! Every woman on earth!"; patt=/(wo)?man/g; patt.compile(patt); str1=str.replace(patt,"person"); console.log(str1); //Every person in the world! Every person on earth!
十、Toast組件（react）

export let toastIt = function (text: string, timeout: number) {
    var timeout = timeout || 3000;
    let toast = document.createElement('DIV');    
    toast.classList.add('toast-it');
    let content = document
        .createTextNode(text);
    toast.appendChild(content);
    toast.style.animationDuration = timeout / 1000 + 's';

    document.body.appendChild(toast);
    setTimeout(
        function () {
        document.body.removeChild(toast);
        }, 
        timeout
    );
};
複製代碼

/* toast 提示 */
.toast-box {
    width: 600px;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -80%); 
    animation-timing-function: ease-in;
    animation-duration: 3s;  
    animation-delay: 5s; 
    .toast {
        width: 120px;
        color: $color-white;
        padding: 10px 20px;
        text-align: center;
        background: #000;
        opacity: 0.5;
        filter: alpha(opacity = 50);
        margin: 0 auto;
    }
} 
@keyframes TOAST-APPEAR {
    0% {
        max-height: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity = 0);
    }
    15% {
        max-height: 60px;
        top: 10px;
        opacity: 1;
        filter: alpha(opacity = 100);
    }
    80% {
        max-height: 60px;
        top: 45px;
    }
    100% {
        max-height: 60px;
        top: 50px;
    }
}
複製代碼

十一、頁面間傳值

localStorage.setItem("user",JSON.stringify(data.allUser)); var user = JSON.parse(localStorage.getItem("user")); localStorage.removeItem("user");

一個id值

//將id保存在cookie
$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
//從cookie中取出id
var doctorId = $.cookie('doctorId');
複製代碼

多個值

//將多個值存放在對象中
var userData = {
    userId: "11916122-f2eb-11e4-b756-f40669963d49",
    patientName: "張麗",
    patientAge: 23,
    patientSex: "F"
}
//將這個對象保存在cookie,它的鍵是對象名稱，值爲JSON.stirng()，目的是將這個對象解析爲字符串，由於cookie的鍵與值都是字符串
$.cookie('userData' , JSON.stringify(userData));

var userData = $.cookie('userData');
if(userData){
    //JSON.parse() 將字符串解析爲對象，方便使用
    userData = JSON.parse(userData);
};
複製代碼

十二、IE中發生 line-height 屬性的 bug

發生狀況:當在一個標籤中套入img,input,textarea,select,object等元素的時候會發生.

如在body中設置line-height:80px;而後body中<p>有文字有img,有input...這個bug就發生了,在ie下的line-height會縮小了,但在ff和opera是正常的,因而咱們爲了解決這個辦法須要單獨給ie設置樣式;
```
/* 簡單的css樣式 */
body {
	line-height: 80px;
}
*html img {
	margin: 10 0; /* (line-height的高度-img的高度)/2px */
	vertical-align: center;
}
*html input {
	vertical-align: center;
}
複製代碼
```
1三、ios自帶的上下滑動刷新頁面

gearDateTouch.addEventListener('touchmove', function (event) {     
    event.preventDefault();
},false);
複製代碼

1四、css 解決 iOS 點擊時出現半透明的灰色背景

input, div, p, ul, li, span, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
複製代碼

1五、在經過如下屬性實現 tab 左右切換時，ie8 中沒法及時渲染，需在切換的事件中，提早給其的任意祖先元素添加類型進行渲染

javascript$('.debit-note-rise').addClass('ie8-render');

.note-rise-bar {
    width: 72px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 24px;
    -webkit-transition: left .15s ease-in;
    transition: left .15s ease-in;
    background: url(../img/hotel/note-rise-bg.png) no-repeat;
}
.note-rise-parent {
    height: 24px;
}
.note-rise-son {
    position: absolute;
    top: 0;
    left: 0;
}
.note-rise-parent[data-active-index="1"] .note-rise-bar {
    left: 73px;
}
複製代碼

1六、不管幾行數據，都保證垂直方向居中顯示

父元素： display: table; height: 100px;

子元素： display: table-cell; vertical-algin：middle;

1七、jQuery 頁面帶錨點跳轉

var anchor = true;//初次進入時的錨點定位
var roomEle = false;//判斷房型列表子元素
var commentEle = false;//判斷點評列表子元素

    //頁面加載 錨點定位
function anchorPosition(anchor, listEle) {
    if(anchor && listEle) {
        var url = window.location.toString();
        var id = url.split('#')[1];
        //判斷url中是否有錨點定位
        if (id) {
            var t = $('#' + id).offset().top;
            $(window).scrollTop(t);
            anchor = false;
        }
    } 
}

//判斷點評列表子元素 頁面加載錨點定位
commentEle = ($('.hotel-detail-discuss .comments-detail > div').length != 0);
anchorPosition(anchor, commentEle);

//判斷房型列表子元素 頁面加載錨點定位
roomEle = ($('#hotel-room-list > ul').length != 0 || $('#hotel-room-list > div').length != 0);  
anchorPosition(anchor, roomEle);

//清除篩選項模塊
$("#clear-condition").live("click", function () {
        _clearCondition();
    queryRoomList();
    anchor = false;//避免頁面再次自動錨點定位
});


var thisID = window.location.hash;
var mao = $('#hotel-comment');
if(thisID == '#hotel-comment') {
    var pos = mao.offset().top;
    $('html, body').animate({scrollTop: pos}, 100);
}
複製代碼

1八、 iPhoneX中的安全區域全覆蓋，在 meta 標籤中添加 viewport-fit=cover

auto：默認 viewprot-fit:contain; 頁面內容顯示在 safe area 內 cover： viewport-fit:cover,頁面內容充滿屏幕

當咱們設置 viewport-fit:cover 時：設置以下

body {
    padding-top: constant(safe-area-inset-top);   /* 爲導航欄+狀態欄的高度 88px */          
    padding-left: constant(safe-area-inset-left);   /* 若是未豎屏時爲0 */               
    padding-right: constant(safe-area-inset-right); /* 若是未豎屏時爲0 */              
    padding-bottom: constant(safe-area-inset-bottom);/* 爲底下圓弧的高度 34px */      
}
複製代碼

1九、在react+typescript中定時器的使用

private timer: number; TypeScript 在 setTimerOut 中的定義成 number,在 setTimerOut 前添加 window.setTimerOut

20、定時隱藏某元素

componentDidMount() {
    this.showSaveCover();
}
  
showSaveCover() {
    this.setState({
        isWarning: true
    });
    this.hideSaveCover();
}

hideSaveCover() {
    var self = this;  
    if (this.timer) {
        clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
        self.setState({
        isWarning: false
        });
    }, 1000);
    clearTimeout(this.timer);
}
複製代碼

2一、ref 的使用與定義

detailInfo: HTMLTextAreaElement ref={(input) => { this.detailInfo = input; }} this.detailInfo.focus();
2二、漸變色

/* Safari 5.1 - 6.0 / background: -webkit-linear-gradient(#04091b 50%, #3d4c5b); / Opera 11.6 - 12.0 / background: -o-linear-gradient(#04091b 50%, #3d4c5b); / Firefox 3.6 - 15 / background: -moz-linear-gradient(#04091b 50%, #3d4c5b); / 標準的語法（必須放在最後）*/ background: linear-gradient(#04091b 50%, #3d4c5b);

2三、水平垂直居中對齊

方式一

.parent {
    position: relative;
}
.targetElm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

方式二

.parent {
    position: relative;
}
.targetElm {
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
複製代碼

方式三

.parent {
    display: table;
    width: 100%;
    height: 50px;
}
.son {
    display: table-cell;
    vertical-align: middle;
}
複製代碼

方式四

.parent {
    display: flex;
} 
.son {
    margin: auto;
}
複製代碼

或

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

或

.parent {
    display: flex;
    justify-content: center;
}
.son {
    align-self: center;
}
複製代碼

2四、placeholder 顏色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: $placeholder;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: $placeholder;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: $placeholder;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: $placeholder !important;
}
複製代碼

2五、input 標籤 autocomplete 屬性

清除 input 框在頁面中輸入以後產生的歷史記錄,將 autocomplete 中的默認值 on 改爲 off 便可

2六、input text select() 方法

select() 方法用於選取文本域中的內容全部主流瀏覽器都支持 select() 方法 textObject.select()

選取文本域的內容：

<input type="text" id="copyText" value="須要複製的內容">
<button type="button" onClick="handleClick()">複製</button>
<script> function handleClick() { document.getElementById("copyText").select(); document.execCommand('copy'); } </script>
複製代碼

2七、video視頻全屏播放

export default {
    // 進入全屏
    launchFullscreen: function(element) {
        //此方法不能夠在異步任務中執行，否則火狐無法全屏
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) { 
            element.msRequestFullscreen(); 
        } else if (element.oRequestFullscreen) {
            element.oRequestFullscreen();
        }
        else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        } else {
            var docHtml = document.documentElement;
            var docBody = document.body;
            var videobox = document.getElementById('videobox');
            var cssText = 'width:100%;height:100%;overflow:hidden;';

            docHtml.style.cssText = cssText;
            docBody.style.cssText = cssText;
            videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
            document.IsFullScreen = true;
        }
    },
    // 退出全屏
    exitFullscreen: function(element) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.oRequestFullscreen) {
            document.oCancelFullScreen();
        }else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else {
            var docHtml = document.documentElement;
            var docBody = document.body;
            var videobox = document.getElementById('videobox');

            docHtml.style.cssText = "";
            docBody.style.cssText = "";
            videobox.style.cssText = "";
            document.IsFullScreen = false;
        }
    }
}
複製代碼

2八、--save 與 –save-dev 的區別

-save-dev 是指將包信息添加到 devDependencies，表示你開發時依賴的包裹。

-save 是指將包信息添加到 dependencies，表示你發佈時依賴的包裹。

例如，咱們在開發時會用到 gulp 來壓縮咱們的文件。這是咱們的 gulp 包信息就會添加到 devDependencies，咱們在發佈時發佈壓縮文件，並不要用到 gulp。利用 nodejs 構建的服務器在發佈後會常常被訪問用到，http包的信息就會添加到 dependencies 區域。

2九、vue 中頁面導出成圖片

<!-- 圖表導出 -->
<div class="plOverview-subTitle">
    <span class="chart-export" @click="screenshots()">圖表導出</span>        
</div>
<!-- 須要打印的區域 -->
<div class="row" ref="copyCardArea" id="copyCardArea"><div>

import $ from "jquery";
import html2canvas from "html2canvas";

// 頁面指定區域導出成圖片
screenshots() {
    let b64;
    html2canvas(this.$refs.copyCardArea, {
      	useCORS: true
    }).then(canvas => {
        try {
            b64 = canvas.toDataURL("image/png");
            var triggerDownload = $("#tttt").attr("href", b64).attr("download", "order-1111111111.png");
            triggerDownload[0].click();                    
         } catch (err) {
             alert(err);
          }
          this.imgUrl = b64;
    });
}
複製代碼

30、vue 中將頁面導成 pdf

htmlToPdf.js

import html2Canvas from 'html2canvas';  
import JsPDF from 'jspdf';  
export default{  
    install (Vue, options) {  
        Vue.prototype.getPdf = function () {  
            var title = this.htmlTitle;  
            html2Canvas(document.querySelector('#pdfDom'), {  
                allowTaint: true  
            }).then(function (canvas) {  
                let contentWidth = canvas.width; 
                let contentHeight = canvas.height;  
                let pageHeight = contentWidth / 592.28 * 841.89;  
                let leftHeight = contentHeight;  
                let position = 0;  
                let imgWidth = 595.28;  
                let imgHeight = 592.28 / contentWidth * contentHeight;  
                let pageData = canvas.toDataURL('image/jpeg', 1.0); 
                let PDF = new JsPDF('', 'pt', 'a4');  
                if (leftHeight < pageHeight) {  
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);  
                } else {  
                    while (leftHeight > 0) {  
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); 
                        leftHeight -= pageHeight;  
                        position -= 841.89;  
                        if (leftHeight > 0) {  
                            PDF.addPage();  
                        }  
                    }  
                }  
                PDF.save(title + '.pdf');  
            })  
        }  
    }  

}  
複製代碼

Main.js

import htmlToPdf from './htmlToPdf';
Vue.use(htmlToPdf); // 將頁面導出成pdf文件

在頁面中使用
data: function(){
    return {
    	htmlTitle:"qwerdf",  //這個是pdf文件的名字
}
}
<!-- 圖表導出 -->
<div class="plOverview-subTitle">
<span class="chart-export" @click="getPdf()">圖表導出</span>        
</div>
<!—頁面導出區域 -->
<div class="row" id="pdfDom">
複製代碼

3一、判斷訪問終端

方法一：羅列

var browser = {
    versions: function() {
        var u = navigator.userAgent, app = navigator.appVersion;

        return {
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端
            iPhone: u.indexOf('iPhone') > -1 , //是否爲iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
複製代碼

方法二：簡易版本

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    console.log(navigator.userAgent);  
    // window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    console.log(navigator.userAgent); 
    // window.location.href ="Android.html";
} else {
    console.log(navigator.userAgent); 
    // window.location.href ="pc.html";
};
複製代碼

方法三：判斷是否手機端訪問

var userAgentInfo = navigator.userAgent.toLowerCase();
var Agents = ["android", "iphone",
"symbianos", "windows phone",
"ipad", "ipod"];
var ly = document.referrer; // 返回導航到當前網頁的超連接所在網頁的URL
for (var v = 0; v < Agents.length; v ++) {
    if (userAgentInfo.indexOf(Agents[v]) >= 0 && (ly == "" || ly == null)) {
        this.location.href='http://m.***.com'; //wap端地址
    }
}
複製代碼

方法四：iOS或Android客戶端

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios終端
複製代碼

3二、手機中某文字字體大小須要小於12px，可將其放大指定大小的兩倍，再使用 transform scale 縮放 0.5

-webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。