導航:首頁 > 萬維百科 > 網頁設計手機端輸入法

網頁設計手機端輸入法

 發布時間：2020-09-06 23:21:25

1、網頁設計中，如何讓頁面自適應手機端？

一般來說，通過CSS3，可以直接對不同解析度下的樣式進行定義，比如如下的代碼。
/* PC或中大型筆記本設備 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型筆記本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不會兼容老版本ie。
所以也可以通過js，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。

2、什麼輸入法能同步手機端和PC端輸入習慣？

百度輸入法。

3、若讓你設計一款手機中文輸入法，你會怎麼設計？

我會按照使用頻率又高到低的順序排列，然後一個字出來，後面會是最後一個字的詞語，這樣會節省很多時間。

4、如何在手機網頁開發過程中禁用文本框的輸入法

因為是彈層的定位問題，如果定位為fixed，用戶是無法向上滾動看到輸入框了。如果定位為absolute，則用戶就可以滑動頁面向上看到輸入框。這兩種的形式都有一定不好的體驗。可以通過js控制，當用戶點擊輸入框的時候，把彈層網上移動一點，修改top值。

5、有手機版的網頁製作軟體嗎

不建議用手機上的，我其實之前和你有一樣的想法，主要在於手機上沒有比較成熟的編輯器，敲出來總是會有編碼問題，導致中文字元亂碼。而且其實用手機的輸入法並不好敲，你與其用手機敲網頁還不如看看教程書比較劃算。
但是，手機敲是可以敲的，自帶的編輯器敲完改為html後綴就行了。網上也有一些代碼編輯器，勉強能用，但是我仍然建議，手機敲網頁還是當練習比較好。

6、怎麼製作網站的手機版？

可以去下載pageadmin建站系統或者wp系統來做，推薦pageamdin，這個支持pc和手機共享數據，或者你做成響應式網站就可以了。

7、有什麼辦法讓手機端網頁，打開後自動彈出輸入法

手機判斷彈輸入法的，必須是一個輸入窗口。而瀏覽器打開網頁，並不一定會定位到瀏覽器本身或者你網頁裡面的輸入框位置，所以不行。

8、html5手機端，如何做到小鍵盤輸入，頁面布局不往上頂

手機頁面設計一般的大小是640，但是，手機屏幕大小確實不確定的，這樣，怎麼才能做出適應所有手機的手機頁面呢？
一般的解決方案有兩種，rem布局和百分比布局。這兩種方案我有都試過，所以現在更推薦用rem布局來製作手機頁面;

rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 還是別用rem
不過現在的手機一般瀏覽器，一般可以直接不用去管IE內核的瀏覽器了。

REM的計算公式
例:html 設置font-size:16px 1rem = 16px
那麼640px = 640/16 =40rem

個人建議設置為100px 方便計算

首先，給頁面的html定義一個100px的
html{ font-size:100px;}/*設定基礎rem*/

然後，最核心的代碼就是這一段js運算了，根據頁面的大小來控制基礎rem的值；
new function (){
var _self = this;
_self.width = 640;//設置默認最大寬度
_self.fontSize = 100;//默認字體大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener("resize",function(){_self.changePage();},false);
};
demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>rem基礎布局</title>
<script type="text/javascript">
new function (){
var _self = this;
_self.width = 640;//設置默認最大寬度
_self.fontSize = 100;//默認字體大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener("resize",function(){_self.changePage();},false);
};
</script>
<style type="text/css">
/*=== base style===*/
*{margin: 0px; padding: 0px;}
ul{list-style: none;}
.wrap{min-width: 320px; max-width: 640px; width: 100%; margin: 0px auto;; background: #2a6ace; font-family:"微軟雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; font-size: 12px;}/*適用於手機端：字體大小用em，1em=16px；為默認字體大小;最大寬度640*/

.pro{width:6.2rem; margin: 0px auto; padding-top: 20px; overflow: hidden;}
.clearfix:after {content:"";height:0;display:block;clear:both;}
.clearfix {zoom:1;}
.pro ul{width:6.4rem;}
.pro li{width: 3rem; height: 3.6rem; float: left; margin: 0 0.2rem 0.2rem 0;}
.pro li .box{width: 3rem; height: 3rem; background: #ccc;}
.pro li p{font-size: 0.24rem; line-height: 0.6rem; text-align: center;}
</style>
</head>
<body>
<div class="wrap">
<div class="pro">
<ul class="clearfix">
<li> <div class="box"></div> <p>區塊文案</p> </li>
<li> <div class="box"></div> <p>區塊文案</p> </li>
<li> <div class="box"></div> <p>區塊文案</p> </li>
<li> <div class="box"></div> <p>區塊文案</p> </li>
<li> <div class="box"></div> <p>區塊文案</p> </li>
</ul>
</div>
</div>
</body>
</html>

9、如何在手機上設置自己喜歡的個性輸入法？

下載自己喜歡的個性輸入法並安裝完成後，打開手機的設置--語言和專時間--鍵盤和輸入法，屬在默認選項裡面選擇自己需要的即可。訊飛輸入法v5.2.2216集語音、手寫、拼音、筆畫輸入於一體，還支持粵語、英語輸入11.4m搜狗輸入法v7.719.4mhttp://pan.baidu.com/s/1dDAtQd7

10、手機端瀏覽器中的html搜索框如何響應軟鍵盤搜索按鈕事件？

首先不確定是是否這個搜索用了ajax，這其實就類似PC端的keydown,keypress事件只不過PC端有時候要判斷是否是回車鍵而已，手機端的話
<form action="#"> <input type="search" /> <input type="submit" id='searchBtn'/> </form>
$('#searchBtn').on('submit', function(e){
... //搜索 });

與網頁設計手機端輸入法相關的知識