在input外加一个div,设置div的宽度,在heml5中,jquery mobile 的input设置宽度是无效的
head之间加上这句<meta name="viewport" content="width=device-width" />
这不是你的网页设计中进行的“缩放”设计,这是对浏览器的参数设置!
android平台中页面自适应
html和css都是完全自适应的,如果你发现你的页面在android中显示的并不是自适应的时候,
请你确认你的head标签中是否包含以下meta标签:
<meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;”/>
首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0;” name=”viewport” />
2 <meta content=”yes” name=”apple-mobile-web-app-capable” />
3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
4 <meta content=”telephone=no” name=”format-detection” />
第一个标签:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
第二个标签:iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个标签:iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个标签:告诉设备忽略将页面中的数字识别为电话号码
jquery mobile屏幕宽度输入框模式自适应界面问题
2015年02月23日 ⁄ 综合 ⁄ 共 850字 ⁄ 字号 小 中 大 ⁄ 评论关闭
id="cproIframe_u1788635_2" width="336" height="280" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DbCZjJq_NITUPpmmAB5J8kRzmBYPtKaIm4mrUs8nmHpe1zbkJxpX2nhGxX4Ap2N47%26wd%3D%26eqid%3D9e2bece200008c020000000556025a48<u=http%3A%2F%2Fwww.xuebuyuan.com%2F2225820.html&lu_161=0&lunum=6&n=83099053_cpr&pcs=1366x642&pis=10000x10000&ps=486x909&psr=1366x768&pss=1366x506&qn=932f2839358cab5e&rad=&rsi0=336&rsi1=280&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1788635&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_336_280&tpr=1442994789005&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1788635&ti=jquery%20mobile%E5%B1%8F%E5%B9%95%E5%AE%BD%E5%BA%A6%E8%BE%93%E5%85%A5%E6%A1%86%E6%A8%A1%E5%BC%8F%E8%87%AA%E9%80%82%E5%BA%94%E7%95%8C%E9%9D%A2%E9%97%AE%E9%A2%98%20%7C%20%E5%AD%A6%E6%AD%A5%E5%9B%AD&tt=1442994788918.242.301.301" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; background: transparent;">