完美解決fixed在手機端的bug和移動端1px寬度

舞動乾坤發表於2017-10-21

一、帶input的fixed在ios下失效

在ios下，一個頁面如果有fixed浮層，並且浮層裡面有input，那麼當input focused的時候，fiexed層的位置就會錯亂。

如圖:

例子：demo.zhangruojun.com/static/page…

/*
 * @author: zhangruojun;
 * @design: ;
 * @update: 2016-05-24;
 */

/*reset*/
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form { margin: 0; }
ol, ul, input {margin: 0; padding: 0; }
ol, ul { list-style: none; }
body { -webkit-font-smoothing: antialiased; font-family: Arial, DroidSansFallback, Helvetica, Tahoma, \5FAE\8F6F\96C5\9ED1, sans-serif, Sans; }
h1, h2, h3, h4, h5, h6, p { font-weight: normal; }
a, button, button:active, input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
em, i { font-style: normal; }
a { text-decoration: none; }
img { border: none; }
input:focus { outline: none; }


/*rem = px / 30 */
html, body { position: relative; height: 100%; }


.page { overflow: auto;  -webkit-overflow-scrolling: touch;  }
.wrapper { position: relative; font-size: 0.8rem; color: #333;  }
.container { position: relative; height: 100%;  overflow: auto;  -webkit-overflow-scrolling: touch; font-size: 0.8rem; color: #333; }

.intro-detail { padding-bottom: 4.77rem; }
.modal { overflow: hidden; min-height: 20rem; }
.cont-md { padding: 3.0rem 0 0 0; text-align: center; line-height: 1.6; white-space: nowrap; }
.cont-md .tit { font-size: 1.07rem; line-height: 1.4; }
.cont-md .lead { margin: 1.0rem 0 0 0; }

.intro-detail .modal:nth-child(1) { background-color: #f4f5f6; }
.intro-detail .modal:nth-child(2) { background-color: #d6dae3; }
.intro-detail .modal:nth-child(3) { background-color: #A9B0C5; }
.intro-detail .modal:nth-child(4) { background-color: #6D789D; color: #fff; }


.sticky-bt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: center; -webkit-justify-content: center; }
.sticky-bt { position: fixed; left: 0; right: 0; bottom: 0; height: 4.77rem; background-color: rgba(0, 0, 0, .5); z-index: 10; }
.btn-primary { display: block; width: 20.1rem; height: 2.93rem; line-height: 2.93rem; border-radius: 2.93rem; margin: 0 auto; background: #4D5572; font-size: 1.2rem; color: #fff; text-align: center; transition: .3s; }
.btn-primary:active { transform: scale(.98); }
.inp-bt { display: block; box-sizing: border-box; width: 90%; height: 2.5rem;  padding: .3rem; margin: 0 auto; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }



.sticky-bt.intop { bottom: auto; top: 0; }









/*dpi*/
/* for 1080+ px width screen */
@media only screen and (min-width: 1080px){
    html, body { font-size: 51.67px; }
}
/* for 1080 px width screen */
@media only screen and (max-width:1080px) {
    html, body { font-size: 45px; }
}
/* for 800 px width screen */
@media only screen and (max-width:800px) {
    html, body { font-size:33px; }
}
/* for 720 px width screen */
@media only screen and (max-width:720px) {
    html, body { font-size:30px; }
}
/* for 640 px width screen */
@media only screen and (max-width:640px) {
    html, body { font-size: 27px; }
}
/* for 540 px width screen */
@media only screen and (max-width:540px) {
    html, body { font-size: 22.5px; }
}
/* for 480 px width screen */
@media only screen and (max-width:480px) {
    html, body { font-size: 20px; }
}
/* for 450 px width screen */
@media only screen and (max-width:450px) {
    html, body { font-size: 18.9px; }
}
/* for 414 px width screen */
@media only screen and (max-width:414px) {
    html, body { font-size: 17.25px; }
}
/* for 375 px width screen */
@media only screen and (max-width:375px) {
    html, body { font-size: 15.625px; }
}
/* for 320 px width screen */
@media only screen and (max-width:320px) {
    html, body { font-size: 13.5px; }
}
複製程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

    <div class="sticky-bt intop">
        <input class="inp-bt" placeholder="輸入文字" type="text"/>
    </div>

    <div class="wrapper"><!--container-->
        <div class="intro-detail">
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>首先我們要先知道有這三個概念，<br/>執行環境、作用域鏈、變數物件</p>
                        <p>當開始執行上面這段js程式碼的時候，<br/>全域性執行環境進棧，執行環境帶有與之關聯的變數物件，<br/>程式碼在環境中執行時，會建立變數物件的作用域鏈</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>normal函式執行完之後，它的執行環境將被推出環境棧，<br/>當前環境回到全域性執行環境。<br/>normal函式執行時所建立的活動物件（變數物件）<br/>也隨之銷燬(沒有指標指向它，<br/>垃圾回收時會將其回收掉，釋放記憶體).</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>首先我們要先知道有這三個概念，<br/>執行環境、作用域鏈、變數物件</p>
                        <p>當開始執行上面這段js程式碼的時候，<br/>全域性執行環境進棧，執行環境帶有與之關聯的變數物件，<br/>程式碼在環境中執行時，會建立變數物件的作用域鏈</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>normal函式執行完之後，它的執行環境將被推出環境棧，<br/>當前環境回到全域性執行環境。<br/>normal函式執行時所建立的活動物件（變數物件）<br/>也隨之銷燬(沒有指標指向它，<br/>垃圾回收時會將其回收掉，釋放記憶體).</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sticky-bt">
        <input class="inp-bt" placeholder="輸入文字" type="text"/>
    </div>


<script>document.body.addEventListener('touchstart', function () {});</script>

</body>
</html>
複製程式碼

（掃碼檢視頁面效果）

解決方法是，將除了fiexed層的內容放在div.container裡面並加上以下樣式。即整個body設定100%的高度不做滾動，只給內容div自己滾動。

.container{ 
    position: relative; 
    height: 100%; 
    overflow: auto;  
    -webkit-overflow-scrolling: touch;
 }複製程式碼

例子：demo.zhangruojun.com/static/page…

/*
 * @author: zhangruojun;
 * @design: ;
 * @update: 2016-05-24;
 */

/*reset*/
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form { margin: 0; }
ol, ul, input {margin: 0; padding: 0; }
ol, ul { list-style: none; }
body { -webkit-font-smoothing: antialiased; font-family: Arial, DroidSansFallback, Helvetica, Tahoma, \5FAE\8F6F\96C5\9ED1, sans-serif, Sans; }
h1, h2, h3, h4, h5, h6, p { font-weight: normal; }
a, button, button:active, input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
em, i { font-style: normal; }
a { text-decoration: none; }
img { border: none; }
input:focus { outline: none; }


/*rem = px / 30 */
html, body { position: relative; height: 100%; }


.page { overflow: auto;  -webkit-overflow-scrolling: touch;  }
.wrapper { position: relative; font-size: 0.8rem; color: #333;  }
.container { position: relative; height: 100%;  overflow: auto;  -webkit-overflow-scrolling: touch; font-size: 0.8rem; color: #333; }

.intro-detail { padding-bottom: 4.77rem; }
.modal { overflow: hidden; min-height: 20rem; }
.cont-md { padding: 3.0rem 0 0 0; text-align: center; line-height: 1.6; white-space: nowrap; }
.cont-md .tit { font-size: 1.07rem; line-height: 1.4; }
.cont-md .lead { margin: 1.0rem 0 0 0; }

.intro-detail .modal:nth-child(1) { background-color: #f4f5f6; }
.intro-detail .modal:nth-child(2) { background-color: #d6dae3; }
.intro-detail .modal:nth-child(3) { background-color: #A9B0C5; }
.intro-detail .modal:nth-child(4) { background-color: #6D789D; color: #fff; }


.sticky-bt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: center; -webkit-justify-content: center; }
.sticky-bt { position: fixed; left: 0; right: 0; bottom: 0; height: 4.77rem; background-color: rgba(0, 0, 0, .5); z-index: 10; }
.btn-primary { display: block; width: 20.1rem; height: 2.93rem; line-height: 2.93rem; border-radius: 2.93rem; margin: 0 auto; background: #4D5572; font-size: 1.2rem; color: #fff; text-align: center; transition: .3s; }
.btn-primary:active { transform: scale(.98); }
.inp-bt { display: block; box-sizing: border-box; width: 90%; height: 2.5rem;  padding: .3rem; margin: 0 auto; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }



.sticky-bt.intop { bottom: auto; top: 0; }









/*dpi*/
/* for 1080+ px width screen */
@media only screen and (min-width: 1080px){
    html, body { font-size: 51.67px; }
}
/* for 1080 px width screen */
@media only screen and (max-width:1080px) {
    html, body { font-size: 45px; }
}
/* for 800 px width screen */
@media only screen and (max-width:800px) {
    html, body { font-size:33px; }
}
/* for 720 px width screen */
@media only screen and (max-width:720px) {
    html, body { font-size:30px; }
}
/* for 640 px width screen */
@media only screen and (max-width:640px) {
    html, body { font-size: 27px; }
}
/* for 540 px width screen */
@media only screen and (max-width:540px) {
    html, body { font-size: 22.5px; }
}
/* for 480 px width screen */
@media only screen and (max-width:480px) {
    html, body { font-size: 20px; }
}
/* for 450 px width screen */
@media only screen and (max-width:450px) {
    html, body { font-size: 18.9px; }
}
/* for 414 px width screen */
@media only screen and (max-width:414px) {
    html, body { font-size: 17.25px; }
}
/* for 375 px width screen */
@media only screen and (max-width:375px) {
    html, body { font-size: 15.625px; }
}
/* for 320 px width screen */
@media only screen and (max-width:320px) {
    html, body { font-size: 13.5px; }
}
複製程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

    <div class="sticky-bt intop">
        <input class="inp-bt" placeholder="輸入文字" type="text"/>
    </div>

    <div class="container"><!--wrapper-->
        <div class="intro-detail">
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>首先我們要先知道有這三個概念，<br/>執行環境、作用域鏈、變數物件</p>
                        <p>當開始執行上面這段js程式碼的時候，<br/>全域性執行環境進棧，執行環境帶有與之關聯的變數物件，<br/>程式碼在環境中執行時，會建立變數物件的作用域鏈</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>normal函式執行完之後，它的執行環境將被推出環境棧，<br/>當前環境回到全域性執行環境。<br/>normal函式執行時所建立的活動物件（變數物件）<br/>也隨之銷燬(沒有指標指向它，<br/>垃圾回收時會將其回收掉，釋放記憶體).</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>首先我們要先知道有這三個概念，<br/>執行環境、作用域鏈、變數物件</p>
                        <p>當開始執行上面這段js程式碼的時候，<br/>全域性執行環境進棧，執行環境帶有與之關聯的變數物件，<br/>程式碼在環境中執行時，會建立變數物件的作用域鏈</p>
                    </div>
                </div>
            </div>
            <div class="modal">
                <div class="cont-md">
                    <h2 class="tit">圖解執行環境、作用域、閉包</h2>
                    <div class="lead">
                        <p>normal函式執行完之後，它的執行環境將被推出環境棧，<br/>當前環境回到全域性執行環境。<br/>normal函式執行時所建立的活動物件（變數物件）<br/>也隨之銷燬(沒有指標指向它，<br/>垃圾回收時會將其回收掉，釋放記憶體).</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sticky-bt">
        <input class="inp-bt" placeholder="輸入文字" type="text"/>
    </div>


<script>document.body.addEventListener('touchstart', function () {});</script>

</body>
</html>
複製程式碼

（掃碼檢視頁面效果）

二、iframe裡的fixed在ios下失效

如果我們的頁面裡面嵌入了一個iframe, iframe頁面裡面又正好有fixed浮層，那麼這個時候ios下檢視這個頁面，會發現fixed失效了。

例子：demo.zhangruojun.com/static/page…

（掃碼檢視頁面效果）

底部按鈕浮層並沒有固定在螢幕的底部，而是掉在頁面底部去了。

這是ios自帶的bug，android下並不會有這個問題。

解決方法還是，將除了fiexed層的內容放在div.container裡面並加上以下樣式：

{ 
    position: relative; 
    height: 100%; 
    overflow: auto;  
    -webkit-overflow-scrolling: touch;
 }複製程式碼

demo.zhangruojun.com/static/page…

（掃碼檢視頁面效果）

三、1跟2總結

將html,body高度設定為100%，將頁面內容都裝在高度為100%的容器裡面，滾動不放在body，放在這個子容器，然後fixed層作為其兄弟節點存在。

四、Android某些機型下

Android某些機型下，fixed在底部的input，會被彈出來的軟鍵盤擋住。

不要把input放在fixed層裡面，換一種互動方式。

原文地址：zhangruojun.com/iframeli-de…

移動端1px實現：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<style type="text/css">
			.onepx-border {
				padding: 30px 0px;
				position: relative;
				background: white;
			}
			
			.onepx-border:before {
				content: '';
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200%;
				height: 200%;
				border: 1px solid blue;
				transform-origin: 0 0;
				transform: scale(0.5, 0.5);
				box-sizing: border-box;
				border-radius: 10px;
			}
			.border{
				margin-top: 10px;
				padding: 30px 0px;
				position: relative;
				border: 1px solid red;
				border-radius: 5px;    /*要變成上面的一半*/
			}
		</style>
	</head>

	<body>
		<div class="onepx-border">
			qugdwywqfyuwqyu
		</div>
		<div class="border">
			qugdwywqfyuwqyu
		</div>
	</body>

</html>
複製程式碼

單個邊的1px方案
由於andorid不能設定0.5px畫素的邊框，所以需要通過偽元素來模擬邊框，先使偽元素的高度為1px，然後使用transform: scale(.5)縮小相應的大小即可。具體實現程式碼如下：
.item {
    position: relative;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 1;
        html.pixel-ratio-2 & {
          .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
          .transform(scaleX(0.33));
        }
    }
}
然後不同方向的邊框，只需要跳轉偽元素的位置和縮放位置即可。該實現方案來自Framework7
邊框按鈕的1px方案
除了當個方向的邊框外，還有一種全邊框的按鈕，如果不做處理會顯得特別粗，但是偽元素只有 before 和 after 顯然剛才的單邊的方案不能用，所以只能採用其他方案。
當然還是利用偽元素畫邊框然後通過縮小，達到邊框變細的目的。首先我們使用偽元素畫四條邊，在將寬高調整到200%,最後再縮小50%，由於邊框是1px不會因寬高的改變而改變，所以我們縮小時邊框也會跟著變細。
.block-line {
    position: relative;
    border: 1px solid #000;  // 正常情況下
    html.pixel-ratio-2 & {
        border-color: rgba(0, 0, 0, 0);
        &:before {
            content: "";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            transform: scale(0.5);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
        }
    }

    html.pixel-ratio-3 & {
        border-color: rgba(0, 0, 0, 0);
        &:before {
            content: "";
            width: 300%;
            height: 300%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #000;
            transform: scale(0.33);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
        }
    }
}
此解決方案來自Frozen UI複製程式碼

解決移動端兩端佈局的input+fixed的bug
2017-02-23
移動端1px解決方案
2019-03-15
解決移動端1px Border
2018-03-03
移動端高清屏 1px 解決方案
2019-04-23
目前解決移動端1px邊框最好的方法
2020-07-22
移動端1px誤差的原因以及解決方案
2018-10-09
移動端滾動穿透問題完美解決方案
2020-11-13
穿透
移動端頁面寬度相容處理
2017-02-23
移動端實現1px的邊框
2018-04-14
有效解決移動端虛擬鍵盤影響fixed定位問題
2018-09-12
移動端bug總結
2015-11-03
Vue本地開發的移動端如何在手機上檢視？
2019-10-11
Vue
解決移動端滾動穿透
2019-01-24
穿透
移動端滾動穿透解決方案
2018-03-31
穿透
移動 web 1px 邊框解決方案
2019-03-04
Web
移動端頁面滾動--解決方法
2018-05-04
解決移動端複製問題
2019-02-21
在手機端使用拍照功能上傳圖片的功能的解決文案
2021-09-09
移動端(手機端)頁面自適應解決方案—rem佈局篇
2017-11-30
REM
移動端事件穿透的原理與解決方案
2020-07-24
事件穿透
移動端canvas不支援rem的解決方案
2018-04-16
CanvasREM
移動端滾動穿透問題解決方案
2018-10-22
穿透
淺談前端和移動端的事件機制
2017-10-26
前端事件
解決vue移動端適配問題
2018-12-11
Vue
移動端適配問題解決方案
2018-04-23
echarts移動端字型模糊解決方法
2018-05-02
Echarts
移動端踩坑之旅-ios下fixed失效，軟鍵盤等
2017-10-18
iOS
SVG圖片在移動端的應用解決方案
2019-04-01
SVG
適配移動端的問題以及解決方案
2018-11-26
Retina 屏移動裝置 1px解決方案
2016-04-20
STL推出端到端光纖寬頻和5G無線解決方案
2021-09-26
移動端swiper嵌iframe無法滑動的解決方案
2019-03-12
解決手機端和 PC 端跳轉不同頁面
2019-08-02
移動端點透問題及其解決方案
2017-08-03
移動端和PC端互動設計上的區別
2019-06-13
React 服務端渲染完美的解決方案
2019-01-08
React服務端
移動端動態更新的原理和模式，你瞭解多少？
2023-04-07
模式
【移動端適配】用vw、vh＋媒體查詢打造最完美的移動端適配方案
2019-05-31

完美解決fixed在手機端的bug和移動端1px寬度

一、帶input的fixed在ios下失效

二、iframe裡的fixed在ios下失效

三、1跟2總結

四、Android某些機型下

移動端1px實現：

相關文章