手机端适配样式以及识别手机登录

最新推荐文章于 2024-12-02 12:11:33 发布

原创最新推荐文章于 2024-12-02 12:11:33 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3 #html5 #手机端

前端专栏收录该内容

11 篇文章

订阅专栏

本文探讨了如何进行手机端网页的样式适配，包括使用HTML5和CSS3技术，确保在不同手机设备上的良好显示效果。同时，文章也讲解了如何设置手机登录功能，提供了一种优化用户体验的解决方案。

html,
body {
    /* 安卓默认360 */
width: 100%;
font-size: 62.5%;
}

/* iphone5 */
@media only screen and (min-width: 320px) {
html,
body {
font-size: 55.556% !important;
}
}
/* 一般安卓手机 */
@media only screen and (min-width: 360px) {
html,
body {
font-size: 62.5% !important;
}
}
/* iphone6/7/8 */
@media only screen and (min-width: 375px) {
html,
body {
font-size: 65.10417% !important;
}
}

/* iphone6/7/8 plus */
@media only screen and (min-width: 414px) {
html,
body {
font-size: 71.875% !important;
}
}
/* ipad */
@media only screen and (min-width: 768px) {
html,
body {
font-size: 133.3333% !important;
}
}
/* ipad pro */
@media only screen and (min-width: 1024px) {
html,
body {
font-size: 177.77778% !important;
}
}

var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
        //手机端
    }

可以关注我的公众号：技术趣谈