移动端笔记 — JS与CSS问题及解决方法

最新推荐文章于 2024-09-21 23:59:03 发布

cc蒲公英

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量411

点赞数

文章标签： css javascript 移动

一、css部分

body,html{ height:100%; overflow: hidden; }是可以滑动，
禁止滑动需外面再套一层div{ height:100%; overflow: hidden;}
这样元素超出body元素就不能滑动了。
去除webkit滚动条
element::-webkit-scrollbar{
display: none;
}
去除button在ios上默认样式
-webkit-appearance: none;
border-radius: 0;
不想让按钮touch时有蓝色边框
-webkit-tap-highlight-color: #000；
禁止用户选中文字
-webkit-user-select: none;
移动端做效果，通过改变position: absolute; top 或margin值做效果的话很差，不流畅，
使用CSS3 transition或animation效果将非常棒（这一方面IOS比android又要好不少）。
用img图片时会发现图片下总有大概4px的空白，解决方案：
img{ display: block } 或
img{ vertical-align: top } 或
img{ float: left }
用a标签的话，尽量让a标签block，让用户可点击区域最大化。
用input输入框，ios虚拟键盘弹出遮住了input可见域，整个视窗的高度就会变为减去键盘的高度，你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。可当focus时就把它设为absolute，视情况而定。
当用input{ width:100% }，有可能input宽度超出屏幕，可对input加个属性box-sizing: border-box;

  关于box-sizing:border-box，此属性是把边框的高宽包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行。

两个页面使用了transform之后，页面下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了，如果遇到这个问题的，详细可以看这
table的td设置超出宽度隐藏
table-layout: fixed; （固定布局）

二、js部分

微信浏览器里均不能打开下载的链接，需在浏览器打开。
如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果irame里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）。
微信升级到6.0后，在微信网页里需要用到设置分享的标题等，需要用到JSSDK，同时去微信公众平台里绑定里放置网页的域名。
不过JSSDK也不是所有问题都解决了，在android里点击分享到朋友圈时就触发了分享成功的回调函数，即使取消分享也已经触发了成功的函数（现在不知道是否有修复，如果遇到了这类问题，应该就是这个原因）