頁(yè)面縮放兼容性處理方法(zoom,Firefox火狐瀏覽器)
1、頁(yè)面縮放用到的技術(shù)點(diǎn)
(1)zoom
zoom:normal | <number> | <percentage> 默認(rèn)值:normal 適用于:所有元素 繼承性:有
可以使用用浮點(diǎn)數(shù)和百分比來(lái)定義縮放比例。
zoom的瀏覽器兼容性:http://caniuse.com/#search=zoom
zoom的兼容性:firefox 全系列不支持。
(2)transform
transform:scale(1.1,1.1);
scale(x,y) 定義 2D 縮放轉(zhuǎn)換。
兼容性:http://caniuse.com/#search=transform
transform 屬于CSS3屬于,其兼容性:IE6-8不支持。
2、頁(yè)面縮放示例代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>頁(yè)面縮放兼容性處理(zoom,Firefox火狐瀏覽器)</title> <style> * { margin: 0; padding: 0; font-size: 14px; font-family: "microsoft yahei"; box-sizing: border-box; } p { text-indent: 2em; line-height: 25px; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } </style> </head> <body> <button type="button" id="pageBig" class="btn">頁(yè)面放大</button> <button type="button" id="pageSmall" class="btn">頁(yè)面縮小</button> <p> 前端對(duì)于網(wǎng)站來(lái)說(shuō),通常是指,網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā),前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì),前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn),包括基本的HTML和CSS以及JavaScript/ajax,現(xiàn)在最新的高級(jí)版本HTML5、CSS3,以及SVG等。 </p> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { //初始化默認(rèn)縮放級(jí)別 var zoomNum = 1; var $body = $('body'); //頁(yè)面放大函數(shù) function PageBig() { zoomNum += 0.1; //兼容firefox瀏覽器代碼 //需要transform-origin:center top設(shè)置,否則頁(yè)面頂部看不到了 $body.css({ '-moz-transform': 'scale(' + zoomNum + ')', 'transform-origin': 'center top' }); $body.css('zoom', zoomNum) } //頁(yè)面縮小函數(shù) function PageSmall() { zoomNum -= 0.1; //兼容firefox瀏覽器代碼 //需要transform-origin:center top設(shè)置,否則頁(yè)面頂部看不到了 $body.css({ '-moz-transform': 'scale(' + zoomNum + ')', 'transform-origin': 'center top' }); $body.css('zoom', zoomNum); } $('#pageBig').click(function() { PageBig(); }); $('#pageSmall').click(function() { PageSmall(); }); }) </script> </body> </html>
效果:
注意:
transform轉(zhuǎn)換的基準(zhǔn)位置屬性為transform-origin,transform-origin屬性默認(rèn)值為上下左右中間位置,即:
transform-origin:50% 50% 0
為防止頁(yè)面頂部看不到,可以對(duì)transform-origin進(jìn)行重新設(shè)置:
transform-origin: center top;
以上這篇頁(yè)面縮放兼容性處理方法(zoom,Firefox火狐瀏覽器)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序數(shù)據(jù)請(qǐng)求的方式和注意事項(xiàng)詳解
這篇文章主要為大家介紹了微信小程序網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的方式和注意事項(xiàng)講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11webpack-dev-server搭建本地服務(wù)器的實(shí)現(xiàn)
當(dāng)我們使用webpack打包時(shí),發(fā)現(xiàn)每次更新了一點(diǎn)代碼,都需要重新打包,我們希望本地能搭建一個(gè)服務(wù)器,本文就介紹如何使用webpack-dev-server搭建本地服務(wù)器,感興趣的可以了解一下2021-07-07JS編寫(xiě)兼容IE6,7,8瀏覽器無(wú)縫自動(dòng)輪播
在本篇文章里我們給大家?guī)?lái)一篇關(guān)于用原生JS編寫(xiě)兼容IE6,7,8瀏覽器無(wú)縫自動(dòng)輪播的相關(guān)知識(shí)點(diǎn),需要的朋友們參考下。2018-10-10原生JavaScript實(shí)現(xiàn)異步多文件上傳
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)異步多文件上傳,感興趣的小伙伴們可以參考一下2015-12-12js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法
這篇文章主要給大家介紹了關(guān)于js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02JavaScript利用canvas實(shí)現(xiàn)炫酷的碎片切圖效果
這篇文章主要和大家分享一個(gè)炫酷的碎片式切圖效果,本文主要利用canvas來(lái)實(shí)現(xiàn),代碼量不多,但有些地方還是需要花點(diǎn)時(shí)間去理解的,感興趣的可以學(xué)習(xí)一下2022-10-10Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
這篇文章主要介紹了Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字和其字體的顏色,實(shí)現(xiàn)后的效果很不錯(cuò),具有一定的參考價(jià)值,有需要的可以參考借鑒,下面來(lái)一起看看。2016-09-09Bootstrap modal 多彈窗之疊加顯示不出彈窗問(wèn)題的解決方案
Bootstrap modal 多彈窗之疊加顯示不出彈窗問(wèn)題,今天小編抽時(shí)間給大家分享下解決方案,需要的朋友參考下2017-02-02