常见容易遗漏的html标签

<link href="favicon.ico" mce_href="/favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="/favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
// 添加favicon

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
// 保证文档与设备宽度比例相同，不允许放大缩小页面

<meta content=”yes” name=”apple-mobile-web-app-capable” />
// iPhone中的Safari私有属性，允许全屏浏览

<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
// iPhone中的Safari私有属性，定制顶部状态栏的颜色
// content值有三个：default、black、black-translucent。

<meta content=”telephone=no” name=”format-detection” />
// iPhone中的Safari私有属性，禁止电话号码识别
// 如果允许识别，Safari将自动将号码转为<a href="tel://号码">号码</a>，可将针对a标签设置样式

<input autocapitalize="off" />
// 禁止IOS键盘首字母大写

<meta content=”email=no” name=”format-detection” />
// 禁止Android自动识别邮箱地址

* {
    -webkit-touch-callout;
    // 禁止IOS弹出列表按钮，写这个，同样也会禁止用户复制下载图片
    
    -webkit-user-select;
    // 禁止IOS用户选中文字
}


@media screen and (orientation: portrait) {
}
/* 竖屏时使用的样式 */

@media screen and (orientation: landscape) and ( max-width: 1023px) {
    body {
        positon: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        * {
            visibility: hidden !important;
        }
        &:before {
            content: '！！！禁止使用横屏，竖屏浏览更佳';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            padding: 50px;
            text-align: center;
            font-size: $_FS_30;
            font-family: $_FF_Arial;
            @include translate(0, -50%);
        }
    }
}
/* 横屏时使用的样式 */

 

转载于:https://www.cnblogs.com/front-end-1149980941/p/5743061.html