今天小编要跟大家分享的是在HTML培训过程中常见问题集锦，来看看这些问题你中过几个吧！
链接点击时有边框
/* android、IOS 点击一个链接时 **会出现一个边框** 或者半透明灰色遮罩 */a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
不自动识别电话或email。
<!-- 忽略识别号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略识别email -->
<meta content="email=no" name="format-detection">
移动端200-300ms的延迟响应
<!-- 1. fastclick可以解决在手机上点击事件的300ms延迟 -->
<!-- 2. zepto的touch模块，tap事件也是为了解决在click的延迟问题 -->
拉动滚动条时延迟或卡顿
/* 上下拉动滚动条时出现 __卡顿、慢__ 情况 */
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;}
禁止复制或选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;}
长时间按住页面出现闪退
element { -webkit-touch-callout: none; }
输入框默认内阴影
/* iphone及ipad下输入 __框默认内阴影__ */
element{ -webkit-appearance: none; }
某些安卓手机圆角失效
element{ background-clip: padding-box; }
旋转时字体大小调整
/* 旋转屏幕时，字体大小调整的问题 */
html, body, p, div {
-webkit-text-size-adjust:;}
按钮样式被默认样式覆盖
/* ios 设置input 按钮样式会被默认样式覆盖 */
input,
textarea {
border: 0;
-webkit-appearance: none;
}
默认首字母大写
<!-- IOS键盘字母输入，默认首字母大写 -->
<input type="text" autocapitalize="off" />
行高无法垂直居中的问题
/* line-height 在移动端的无法垂直居中的问题 */
html{-webkit-text-size-adjust:none;}
/* 不知道管不管用，还没试 */
改变placeholder的字体颜色
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
禁止长按触发系统菜单
/* 禁止ios长按时触发系统的菜单，以防 ios或者android 长按时下载该图片 */
.css
/* */{-webkit-touch-callout: none}
下拉选择设右对齐
/* select 下拉选择设置右对齐 */
select option {
direction: rtl;
}
动画定义3D硬件加速
/* */
element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);}
/* 注意：3D变形会消耗更多的内存与功耗 */
Retina屏的1px边框
element{
border-width: thin;}
transition闪屏
/* */
{/* 设置内嵌的元素在 3D 空间如何呈现：保留3D */
-webkit-transform-style: preserve-3d;
/* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
-webkit-backface-visibility:hidden;}
浏览器私有及其它meta
QQ浏览器私有 <!-- 全屏模式 -->
<meta name="x5-fullscreen" content="true">
<!-- 强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 强制横屏 -->
<meta name="x5-orientation" content="landscape">
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app">
UC浏览器私有 <!-- 全屏模式 -->
<meta name="full-screen" content="yes">
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 强制横屏 -->
<meta name="screen-orientation" content="landscape">
<!-- 应用模式 -->
<meta name="browsermode" content="application">
唤起select的option展开
/* zepto方式: */
$(sltElement).trrgger("mousedown");
/* 原生js方式:*/
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};
判断手机的类型
var user="";
if (/android/i.test(navigator.userAgent)){
// android
user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
// ios
user="0";
}
判断是否来自微信浏览器
function isFromWeiXin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
}
return false;
}
屏幕旋转的事件
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
/* */{}
}
video无法自动播放
/* video无法自动播放的问题 | 应对方案：触屏即播 */
$('html').one('touchstart',function(){
audio.play()
})
手机拍照和上传图片
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
输入时首字母默认大写
<!-- 取消input在ios下，输入的时候英文首字母的默认大写 -->
<input autocapitalize="off" autocorrect="off" />
上去掉语音输入按钮
/* android */
input::-webkit-input-speech-button {display: none}
如果在HTML培训过程中没有遇到以上问题，说不定工作中会遇到哦，添加粤嵌官网收藏吧，想了解随时能找到。