怎么设置h5移动端的搜索h5 软键盘覆盖input

来源：蜘蛛抓取(WebSpider) 时间：2016-05-30 04:20 标签： h5 键盘搜索按钮
查看: 311|回复: 0
最后登录15/2/12注册时间12/5/16阅读权限50积分-5精华0帖子金币-15618 枚91币0 枚
钻石: 0 颗
人气: 0 次
金币: -15618 个
发表于 16/3/15 09:23:26
ios开发app的时候，内页嵌套的是h5页面，页面中有input textarea的时候，系统键盘在九宫格的情况下，弹不出来标点符号的更多那个表格。只能按照键盘中给定的四种进行选择，而不像非嵌套页面中系统键盘可以出现标点符号的上拉箭头出现表格，可以选择其中的中括号，大括号等其他标点符号。点击方法和记事本点击方法一样。就是不能弹出那个标点符号的表格。
帖子永久地址：&<button type="submit" class="pn" onclick="setCopy('ios开发 调用h5页面的时候，系统键盘在九宫格的情况下，弹不出标点符号的表格\n/thread--1.html', '帖子地址已经复制到剪贴板您可以用快捷键 Ctrl + V 粘贴到 QQ、MSN 里。')">推荐给好友
GMT+8, 16/5/30 12:32
Powered by移动端的网络优化，不限于 Android，同样适用于 iOS 和 H5
推荐一个用了两年的理财产品
我维护的Android经验分享的公众号&40篇
站内推荐文章
阿里、滴滴内推(20k-40k)*16月+
交流讨论区
平安集团 8% 理财产品
那些著名开源库的原理分析
翻.墙.—几十块钱换来大世界
(119,616)(76,677)(75,706)(70,988)(66,245)(62,810)(57,880)(54,673)(54,412)(53,887)
推荐一个用了两年的理财产品
我维护的Android经验分享的公众号&30篇
平安集团 8% 理财产品移动端基础_HTML5学堂
您当前位于： ——> 移动端H5知识[系列] - 视口viewport
移动端H5知识[系列] - 视口viewport
作者：HTML5学堂
关键词：移动端开发,视口,viewport,移动端,开发经验
移动端H5知识[系列] - 视口viewport
：移动端从2012年走到今日，已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者，除了能够处理传统平台的网站，还需要能够处理移动端的网页。可是，新的事物伴随着各个浏览器，也就冒出了各种兼容问题。第二步&&视口
前些日子，趁平日空隙书写了类库系列，这几天就来&普及&一下移动端HTML5开发的小知识吧~！虽然知识小，但是不得不承认的是，它们很重要~！
本系列共6篇文章，如下为标题列表：
1 谈谈相对单位
2 什么是视口
3 CSS3媒体查询
4 移动端&百变&盒模型
5 移动端&背景&妙用
6 移动端fixed定位模式
第二篇 视口
视口指的是移动设备中的设备屏幕窗口。
在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。什么是可见视口，什么又是视窗视口呢？此处举一个例子：如果我们的屏幕是320像素*480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。
为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。
常见viewport数值
iPhone：980
iPad：1024
Android：980
WinPhone：1024
为了让用户能够看清晰设备中的内容，因此我们并不让浏览器按照默认的viewport进行展示。此时就需要进行设置，要尽量保持分辨率和媒体设备视口大小比例为1：1，从而得到最佳的显示效果。
进行视口的设置有两种不同的方法，一种是在meta标签当中，进行视口的设置，通过调整属性值设置视口的具体大小。另一种是使用@viewport进行设置。相比之下，meta更加好用且兼容良好。因此，在此我仅讲解第一种设置方法。
窗口默认显示效果
将视口设置为320像素
&meta　name=&viewport&　content= &width=320& /&
当前的显示状态
将视口设置为设备宽度
&meta　name=&viewport&　content= &width=device-width& /&
将视口设置为设备宽度，并在最初的时候以放大2倍的方式显示
&meta　name=&viewport&　content= &width=device-width, initial-scale=2.0&　/&
欢迎沟通交流~
将视口设置为设备宽度，并允许缩放，最大放大到2倍，最小缩小到1/2
&meta　name=&viewport&　content= &width=device-width, maximum-scale=2.0,　miniumum-scale=0.5& /&
将视口设置为设备宽度，并禁止缩放
&meta　name=&viewport&　content= &width=device-width, user-scalable=no&　/&
视口的相关知识点
width 设定布局视口宽度
height 设定布局视口高度
initial-scale 设定页面初始缩放比例（0-10.0）
user-scalable 设定用户是否可以缩放（yes/no）
minimum-scale 设定最小缩小比例（0-10.0）
maximum-scale 设定最大放大比例（0-10.0）
target-densitydpi* 设定目标屏幕的dpi（device-dpi）
欢迎沟通交流~
爱HTML5的人们
Copyright (C) 2015
黑白任你选：

我要回帖

更多关于 h5 键盘搜索按钮 的文章

 

随机推荐