移动端可能遇到的问题解决方案

1.ios如何取消首字母大写

 <input type="text" autocapitalize="off"> 

2.移动端input键盘右下角搜索按钮

 <form action="" onsubmit="return false">
            <input type="search">
        </form>

解决方式：要一层form；

追杀问题：键盘如何收起 document.activeElement.blur();

3.页面元素被触时产生的半透明灰色蒙层怎么解决 a button input  textarea这些标签被触发时都会有

解决方式：通过css样式来解决

input::-webkit-tap-highlight-color:rgba(0,0,0,0)

4.表单输入框placeholder的颜色可以改变吗

input::-webkit-input-placeholder{color:red}

5. 禁止ios或者安卓的长按保存图片

img{
        -webkit-touch-callout:none;
    }

6.如何禁止ios或者安卓长按选中文字

p{
                -webkit-user-select:none;
            }

7.移动端拍照怎么做

需求：
1、拍照的需求
2、不能在相册选择照片，只能拍照
3、并且拍照后的图片，要显示在页面上

解决：

1、本身input type为file有拍照功能，但是显示效果不好，
所以解决方式：让input隐藏掉，然后让button显示，点击button触发input

<button onclick='document.getElementById("myFile").click()'>拍照</button>
 <input type="file"  capture='camcorder' accept="image/*" style="display: none;" id='myFile'>

2、只是拍照

<input type="file"  capture='camcorder' accept="image/*" style="display: none;" id='myFile'>

最主要： capture='camcorder'

3. 放入图片

var btn = document.getElementById('btn');
            var myFile = document.getElementById('myFile');
            btn.onclick = function(){
                myFile.click();
                myFile.onchange = function(){
                    var myFile = document.getElementById('myFile');
                    var file = myFile.files[0];
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(){
                        if( fileReader.readyState == fileReader.DONE ){
                            document.getElementById('vPhoto').setAttribute('src',fileReader.result);
                        }
                    }
                    fileReader.readAsDataURL(file);
                }
            }

 8.css点击按钮之后出现边框怎么去除  （outline: none）

 

 加之前，点击下一章会有黄色边框

.moment-content .swiper-button-next {
    background-image: url(../img/arrow-next.png);
    position: absolute;
    top: 50%;
    width: 24px;
    height: 45px;
    margin-top: -10px;
    z-index: 10;
    cursor: pointer;
    background-size: 24px 45px;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    outline: none;//加这句就好了
}

 

 加之后点击就木有了

9.在移动端使用click事件有300ms延迟的问题

①禁止双击缩放===》加入mate:user-scalable=no

②fastclick.js 引入js文件

写入代码

if ('addEventListener' in document)
{ document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body); }, false);
}

10. 移动端touch事件有穿透（点透）的问题，该怎么解决？

①阻止默认行为 e.preventDefault();

②同9第二种解决方式
fastclick.js 引入js文件
写入代码：

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body); }, false);
}

 11.移动端点击空白处收起键盘

//点击空白处，收起键盘
                window.addEventListener('touchstart',function(){
                    document.activeElement.blur();
                },false)

 12在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。

-webkit-text-size-adjust: 100%