导航:首页 > 万维百科 > 网页设计手机端输入法

网页设计手机端输入法

 发布时间：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){
... //搜索 });

与网页设计手机端输入法相关的知识