前端移动开发布局的问题解决方法

前端移动开发布局|前端开发者

前端移动开发布局会经常出现一些问题以及如何去解决他们的方法,希望对大家有用:
1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
html 代码

2.关闭iOS键盘首字母自动大写
html 代码

3.禁止文本缩放
css 代码

4.移动端如何清除输入框内阴影在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
css 代码

5.忽略页面的数字为电话,忽略email识别
<meta name=”format-detection” content=”telephone=no, email=no”/>
6.移动端禁止选中内容
css 代码

7.移动端取消touch高亮效果在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止:
css 代码

8.如何禁止保存或拷贝图像通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:PS:需要注意的是,该方法只在 iOS 上有效。
css 代码

9.解决字体在移动端比例缩小后出现锯齿的问题
css 代码

10.栅格布局:
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局
11.按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数
javascript 代码

12.字体大小尽量使用pt或者em,rem,代替px。
13.设置input里面placeholder字体的大小
css 代码

 

14.wap页面有img标签,记得加上display:block;属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度
移动端禁止选中内容
15.如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
css 代码

 

16.audio元素和video元素在ios和andriod中无法自动播放应对方案:触屏即播
javascript 代码

17.手机拍照和上传图片<input type=”file”>的accept 属性
<!– 选择照片 –>
html 代码

<!– 选择视频 –>
<input type=file accept=”video/*”>
ios 有拍照、录像、选取本地图片功能部分android只有选取本地图片功能winphone不支持input控件默认外观丑陋
18.有关Flexbox弹性盒子布局一些属性不定宽高的水平垂直居中
css 代码

[flexbox版]不定宽高的水平垂直居中
css 代码

19.单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
20.多行文本溢出
html 代码

21.使用流体图片
css 代码

22.一像素边框(例子:移动端列表的下边框)
html 代码

23.针对适配等比缩放的方法:
html 代码

前端移动开发布局|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端移动开发布局的问题解决方法》
» 本文链接地址:https://www.rokub.com/2957.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!