移动web开发常见问题解决方案

1.

 // 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">

        // 禁止百度SiteApp转码声明
        <meta http-equiv="Cache-Control" content="no-siteapp">

        // 禁止自动识别电话和邮箱；
        <meta name="format-detection" content="telephone=no, email=no">

        // 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        // 添加到 IOS 主屏后的标题 
        <meta name="apple-mobile-web-app-title" content="觉唯设计">

        // 隐藏地址栏，启用 WebApp 全屏模式
    <meta name="apple-mobile-web-app-capable" content="yes">

    // 优先使用 IE 最新版本和 Chrome
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

        // 注明作者
        <meta name="author" content="www.jiawin.com">

2.      当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。

   a, img {
       -webkit-touch-callout:none;  /* 禁止长按链接与图片弹出菜单 */
    }

    html, body {
       -webkit-user-select:none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
       user-select:none;
    }

3.

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

    //横屏时使用的样式
    @media all and (orientation:landscape) {
            code here ...
    }

4.而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio