完美解決fixed在手機端的bug和移動端1px寬度
1、帶input的fixed在ios下失效
在ios下，一個頁面若是有fixed浮層，而且浮層裏面有input，那麼當input focused的時候，fiexed層的位置就會錯亂。css
如圖:html
例子：demo.zhangruojun.com/static/page…android
/*
* @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>
複製代碼
（掃碼查看頁面效果）
ios
解決方法是，將除了fiexed層的內容放在div.container裏面並加上如下樣式。即整個body設置100%的高度不作滾動，只給內容div本身滾動。web
.container{
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}複製代碼
例子：demo.zhangruojun.com/static/page…bash
/*
* @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>
複製代碼
（掃碼查看頁面效果）
閉包
2、iframe裏的fixed在ios下失效
若是咱們的頁面裏面嵌入了一個iframe, iframe頁面裏面又正好有fixed浮層，那麼這個時候ios下查看這個頁面，會發現fixed失效了。app
例子：demo.zhangruojun.com/static/page…函數
（掃碼查看頁面效果）
flex
底部按鈕浮層並無固定在屏幕的底部，而是掉在頁面底部去了。
這是ios自帶的bug，android下並不會有這個問題。
解決方法仍是，將除了fiexed層的內容放在div.container裏面並加上如下樣式：
{
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}複製代碼
demo.zhangruojun.com/static/page…
（掃碼查看頁面效果）
3、1跟2總結
將html,body高度設置爲100%，將頁面內容都裝在高度爲100%的容器裏面，滾動不放在body，放在這個子容器，而後fixed層做爲其兄弟節點存在。
4、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複製代碼
相關文章
- 1. 移動端1px
- 2. 移動端1px邊框解決方案
- 3. 解決移動端1px問題
- 4. 移動端1px解決方案
- 5. 移動端1px問題解決方案
- 6. H5常碰見的問題———移動端1px解決（完整版）
- 7. 在移動端實現1px的邊框
- 8. 移動端border-1px實現
- 9. 移動端1px 邊框
- 10. css 移動端1px更細
- 更多相關文章...
- • XSLT - 在客戶端 - XSLT 教程
- • XSLT - 在服務器端 - XSLT 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動端1px
- 2. 移動端1px邊框解決方案
- 3. 解決移動端1px問題
- 4. 移動端1px解決方案
- 5. 移動端1px問題解決方案
- 6. H5常碰見的問題———移動端1px解決（完整版）
- 7. 在移動端實現1px的邊框
- 8. 移動端border-1px實現
- 9. 移動端1px 邊框
- 10. css 移動端1px更細