ios系统中元素被触动时发出的半透明石磨蓝遮罩怎么去掉,移动端触摸按钮的效能

        input::-webkit-input-placeholder{color:#AAAAAA;}
        input:focus::-webkit-input-placeholder{color:#EEEEEE;}
.css{-webkit-user-select:none}

android用户点击1个链接,会产出1个边框恐怕半透明蛋黄遮罩,
差距生产商定义出来额效果不雷同,可设置-webkit-tap-highlight-color的阿尔法值为0去除部分机器自带的作用

可参看《不能自动播放的audio成分》

webkit表单成分的暗中同意外观怎么重置

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

6.通用

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播

$('html').one('touchstart',function(){
    audio.play()
})
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <meta content="yes" name="apple-mobile-web-app-capable">
          <meta content="black" name="apple-mobile-web-app-status-bar-style">
          <meta content="telephone=no" name="format-detection">
          <meta content="email=no" name="format-detection">
          <style type="text/css">
            a{
              -webkit-tap-highlight-color: rgba(0,0,0,0);
            }
            .btn-blue{  
              display:block;
              height:42px;
              line-height:42px;
              text-align:center;
              border-radius:4px;
              font-size:18px;
              color:#FFFFFF;
              background-color: #4185F3;
            }
            .btn-blue:active{
              background-color: #357AE8;
            }
          </style>
          </head>
          <body ontouchstart>
          <div class="btn-blue">按钮</div>

          </body>
          </html>

写邮件,可参照《移动web页面给用户发送邮件的章程》

伪成分改变number类型input框的暗中同意样式

.css{-webkit-appearance:none;}

ios用户点击1个链接,会现出三个半晶莹剔透灰黄遮罩,
即便想要禁用,可安装-webkit-tap-highlight-color的阿尔法值为0,约等于属性值的尾声一个人设置为0就可以去除半透明均红遮罩

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}

4.ios系列中成分被触摸时发生的半透明金色遮罩怎么去掉

webkit表单输入框placeholder的文字能换行么
ios可以,android不行~

对此按钮类还有个点子,不使用a可能input标签,间接用div标签

ios 有水墨画、摄像、接纳本地图片功用
一部分android唯有采纳本地图片作用
winphone不支持
input控件暗中认可外观丑陋
微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整
原因

        .css{-webkit-appearance:none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>

3.屏幕旋转的风浪和体制

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
       a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) }

webkit表单输入框placeholder的颜色值能更改么

2.模拟按钮hover效果

发短信,winphone系统无效

        input[type=number]::-webkit-textfield-decoration-container {
            background-color: transparent;    
        }
        input[type=number]::-webkit-inner-spin-button {
             -webkit-appearance: none;
        }
        input[type=number]::-webkit-outer-spin-button {
             -webkit-appearance: none;
        }
<a href="sms:10086">发短信给: 10086</a>
      a,button,input,textarea{
        -webkit-tap-highlight-color: rgba(0,0,0,0;)
        -webkit-user-modify:read-write-plaintext-only; 
      }
<input autocapitalize="off" autocorrect="off" />

除此以外,有些机型去除不了,如酷派2

要到位全包容的法门,可透过绑定ontouchstart和ontouchend来控制按钮的类名

webkit表单输入框placeholder的颜色值改变

对此按钮类还有个方式,不使用a只怕input标签,直接用div标签

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>

            <meta charset="utf-8">
            <meta name="HandheldFriendly" content="True">
            <meta name="MobileOptimized" content="320">

            <meta http-equiv="cleartype" content="on">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <meta name="apple-mobile-web-app-title" content="">
            <meta name="format-detection" content="telephone=no">
            <meta name="format-detection" content="email=no">
            <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        </head>
        <body>
        </body>
        </html>

剥夺 radio 和 checkbox 暗中认可样式
::-ms-check
适用于表单复选框或单选按钮暗中同意图标的改动,同样有多个属性值,设置它隐藏
(display:none) 并动用背景图片来修饰可取得我们想要的功力。

winphone系统a、input标签被点击时发生的半透明玉米黄背景怎么去掉

参考《如何去除android上a标签发生的边框》

  • 事件

    window.orientation,取值:正负90意味横屏形式、0和180显示为竖屏格局

        window.onorientationchange = function(){
          switch(window.orientation){
              case -90:
              case 90:
                  alert("横屏:" + window.orientation);
              case 0:
              case 180:
                  alert("竖屏:" + window.orientation);
              break;
          }
        }
    
  • 样式

        /*竖屏时使用的样式*/
        @media all and (orientation:portrait) {
          .css{}
        }
    
        /*横屏时使用的样式*/
        @media all and (orientation:landscape) {
          .css{}
        }
    

::-ms-expand 适用于表单采用控件下拉箭头的修改,有多少个属性值,设置它隐藏
(display:none) 并接纳背景图片来修饰可得到大家想要的听从。

-webkit-user-modify有个副功能,就是输入法不再可以输入多少个字符

有个别android系统中成分被点击时发生的边框怎么去掉
android用户点击二个链接,会油然则生贰个边框或许半透明淡烟灰遮罩,
不一样生产商定义出来额效果不相同等,可设置-webkit-tap-highlight-color的阿尔法值为0去除部分机器自带的功力

1.rem常用框架(js总计–来自天猫)

取缔ios 长按时不触发系统的食谱,禁止ios&android长按时下载图片

伪成分改变number类型input框的专擅认同样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>

5.部分android系统中成分被点击时发生的边框怎么去掉

<input type=”file”>的accept 属性

资料来源:动用Flexible已毕手淘H5页面的巅峰适配

webkit表单成分的暗中认同外观怎么重置

参考:[webkit移动支付笔记]之怎样去除android上a标签爆发的边框

取消input在ios下,输入的时候英文首字母的默许大写

举手投足端触摸按钮的职能,可明示用户某个事情恰好暴发,是二个相比好经验,不过运动设备中并不曾鼠标指针,使用css的hover并无法满意我们的须要,幸而国外有个激活移动端css的active效果。
一向在body上添加ontouchstart,同样可激活移动端css的active效果,比较推荐那种艺术,代码如下:

公海赌船网址,其它,某些机型去除不了,如三星2

        <meta name="msapplication-tap-highlight" content="no">

兼容性ios5+、部分android 4+、winphone 8

winphone系统a、input标签被点击时暴发的半透明草绿背景怎么去掉

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
input::-webkit-input-speech-button {display: none}

手机拍照和上传图片

参照《怎么着改变表单成分的外观(for Webkit and IE10)》

<meta name="msapplication-tap-highlight" content="no">

采取计算:

摇一摇效果
HTML5
deviceMotion:封装了移动传感器数据的事件,可以博得手机活动状态下的运动加快度等数码。

android 上去掉语音输入按钮

打电话发短信写邮件怎么落到实处
打电话

/**
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
 * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
 * 仅供参考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

1.ios7+接济自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay=”true”
3.播放视频不全屏
webkit-playsinline=”true”

在textarea标签下都得以换行~

IE10(winphone8)表单成分暗中认同外观怎样重置
剥夺 select 暗许下拉箭头

剥夺PC端表单输入框暗中同意清除按钮
当表单文本输入框输入内容后会突显文本清除按钮,::-ms-clear
适用于该排除按钮的改动,同样设置使它隐藏 (display:none)
并行使背景图片来修饰可得到我们想要的功能。

样式

<a href="tel:0755-10086">打电话给:0755-10086</a>

广播视频不全屏

屏幕旋转的轩然大波和体制
事件
window.orientation,取值:正负90代表横屏形式、0和180呈现为竖屏方式;

ios系统中成分被触摸时发出的半透明粉色遮罩怎么去掉
ios用户点击二个链接,会出现2个半透明灰湖绿遮罩,
假诺想要禁用,可设置-webkit-tap-highlight-color的阿尔法值为0,约等于属性值的终极一个人设置为0就足以去除半晶莹剔透钴蓝遮罩

.css{-webkit-touch-callout: none}
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

android侧是复写了layoutinflater 对textview做了统一处理
ios侧是修改了body.style.webkitTextSizeAdjust值
化解方案:

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}  
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}

-webkit-user-modify有个副功能,就是输入法不再可以输入三个字符

android使用以下代码,该接口只在微信浏览器下有效(感激jationhuang同学提供)

禁止ios和android用户选中文字

select::-ms-expand {
display: none;
}

宪章按钮hover效果
运动端触摸按钮的意义,可明示用户有个别事情恰好发生,是三个相比好心得,不过运动设备中并不曾鼠标指针,使用css的hover并不可以满足大家的需要,幸好国外有个激活css的active效果,代码如下,

相关文章