至尊技术网 - 移动端 https://www.zzwws.cn/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ zh-CN Fri, 18 Feb 2022 14:04:00 +0800 Fri, 18 Feb 2022 14:04:00 +0800 MUI-最接近原生APP体验的高性能移动端框架 https://www.zzwws.cn/archives/6329/ https://www.zzwws.cn/archives/6329/ Fri, 18 Feb 2022 14:04:00 +0800 悠悠楠杉 微信截图_20220218140132.png

追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标

MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

使用

<!-- head中 -->
<link rel="stylesheet" type="text/css" href="mui/css/mui.min.css">

<!-- body中 -->
<script src="mui/js/mui.min.js"></script>

文档：https://dev.dcloud.net.cn/mui/ui/
下载地址：https://zhizun.lanzouy.com/ilX7p009spad

]]> 0 https://www.zzwws.cn/archives/6329/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ jQuery WeUI专为微信公众号、移动端页面开发 https://www.zzwws.cn/archives/6324/ https://www.zzwws.cn/archives/6324/ Sat, 29 Jan 2022 13:48:00 +0800 悠悠楠杉 jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共近30 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。

依赖说明
jQuery WeUI 依赖 weui.css 和 jQuery，但是请注意要使用正确的版本。

其中 weui 的版本需要和当前的jQuery WeUI 对应，如果你不确定对应版本可以去看 更新日志 里面的说明。或者你可以直接使用此项目中的 dist/lib/weui.min.css。

jQuery 的版本请至少在 V1.7.0 以上。

当然如果你不愿意自己去找依赖文件，可以直接看下面的CDN服务。

使用CDN
推荐直接使用由 BootCDN 提供的CND服务，速度快并且很稳定：

<!-- head 中 -->
<link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.3/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/swiper.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/city-picker.min.js"></script>

BootCDN 还提供了各个不同的版本，具体请参阅 jQuery WeUI

BootCDN 是同步 CDNJS 的，jQuery WeUI 在 CDNJS 的地址是：https://cdnjs.com/libraries/jquery-weui。因为CDNJS在国内速度比较慢不建议使用，尽量用BootCDN的服务。

下载到本地
推荐通过npm获取代码: npm install jquery-weui

如果你不会用NPM，或者不想用NPM，那么可以点击 jQuery WeUI 下载 - build或者蓝奏云，直接下载build分支，里面全部编译好的代码。

官网：http://old.jqweui.com/


]]> 0 https://www.zzwws.cn/archives/6324/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ css移动端左右滚动导航栏 https://www.zzwws.cn/archives/5351/ https://www.zzwws.cn/archives/5351/ Fri, 16 Jul 2021 17:52:00 +0800 悠悠楠杉 方法一：inline-block和white-space和overflow-y

先让子元素变成内联块，让子元素自动在父容器里面横行排列。

display: inline-block;

再给父容器设置下面两条css样式，让子元素不换行且可以横行滚动。

white-space: nowrap;
overflow-y: auto;

不想让滚动条出现的话，参考上面那种方法里面的隐藏滚动条的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{
            background: pink;
            white-space: nowrap;
            overflow-y: auto;
        }
        ul li{
            width: 50px;
            height: 30px;
            background: yellow;
            margin:10px;
            list-style: none;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</body>
</html>

方法二：flex和overflow-y

下面这两条css属性，能够帮助我们实现 移动端导航栏，左右滚动，但有滚动条。

display: flex;
overflow-y: auto;  /*overflow-y: scroll/hiddle;也行*/

自定义滚动条的伪对象选择器，实现隐藏滚动条的效果。

ul::-webkit-scrollbar {
    display: none;
}

另外还需要注意一点：flex布局在横向排列时，子元素的宽度会失效，这时，可以给子元素通过下面的属性固定宽度。

flex: 0 0 50px; /* 设置固定宽度 */

知识拓展：
1、flex---是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto ；
2、flex-basis---定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            background: gold;
            display: flex;
            overflow-y: auto;
        }
    
        ul::-webkit-scrollbar {
            display: none;
        }
    
        ul li {
            height: 30px;
            background: tomato;
            margin: 10px;
            list-style: none;        
            flex: 0 0 50px; /* 设置固定宽度 */
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</body>
</html>
]]> 0 https://www.zzwws.cn/archives/5351/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ 移动端h5页面meta标签 https://www.zzwws.cn/archives/3487/ https://www.zzwws.cn/archives/3487/ Wed, 22 Apr 2020 17:28:00 +0800 悠悠楠杉 <!-- 移动端常用标签 --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 设置苹果工具栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!--忽略页面中的数字识别为电话，忽略email识别 --> <meta name="format-detection" content="telephone=no, email=no"/> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 微信分享缩略图 --> <meta property="og:image" content="https://...jpg"> ]]> 1 https://www.zzwws.cn/archives/3487/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ JS、PHP判断用户端类型并进行不同链接跳转 https://www.zzwws.cn/archives/3395/ https://www.zzwws.cn/archives/3395/ Mon, 13 Apr 2020 16:54:00 +0800 悠悠楠杉 网页通常需要适配PC端和移动端，适配可以通过响应式布局如bootstrap框架判断屏幕尺寸来展示不同的效果，还可以通过编写两个页面，也就是PC端和移动端分别写一个页面，这种方式更方便功能模块的编写，但需要花费更多的人力。在编写了两个页面时，都是用同一个域名解析，但在实际页面加载时要加载到对应的页面，所以需要判断设备的类型，如下：

<script> 
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        console.log('移动端');
        window.location.href = 'http://www.zzwws.cn';
    }else{
        console.log('PC端');
    }
</script>

将代码放在head标签中，window.location.href为重定向到移动端页面的地址。

比如你想让来访的手机用户重定向到 http://m.baidu.com，那么你就把 http://www.zzwws.cn 替换 http://m.baidu.com

PHP代码如下：

function is_mobile()
{
    // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
    if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) {
        return true;
    }
    // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
    if (isset ($_SERVER['HTTP_VIA']) && stristr($_SERVER['HTTP_VIA'], 'wap')) return true;
    // 脑残法，判断手机发送的客户端标志,兼容性有待提高
    if (isset ($_SERVER['HTTP_USER_AGENT'])) {
        $clientkeywords = array('nokia',
            'sony',
            'ericsson',
            'mot',
            'samsung',
            'htc',
            'sgh',
            'lg',
            'sharp',
            'sie-',
            'philips',
            'panasonic',
            'alcatel',
            'lenovo',
            'iphone',
            'ipod',
            'blackberry',
            'meizu',
            'android',
            'netfront',
            'symbian',
            'ucweb',
            'windowsce',
            'palm',
            'operamini',
            'operamobi',
            'openwave',
            'nexusone',
            'cldc',
            'midp',
            'wap',
            'mobile'
        );
        // 从HTTP_USER_AGENT中查找手机浏览器的关键字
        if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) {
            return true;
        }
    }
    // 协议法，因为有可能不准确，放到最后判断
    if (isset ($_SERVER['HTTP_ACCEPT'])) {
        // 如果只支持wml并且不支持html那一定是移动设备
        // 如果支持wml和html但是wml在html之前则是移动设备
        if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) {
            return true;
        }
    }
    return false;
}
//调用is_mobile()，返回true和false
if(is_mobile()){
    header('location: http://www.zzwws.cn');
}
]]> 0 https://www.zzwws.cn/archives/3395/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/ 移动端网站SEO优化该怎样做（响应式/独立）？ https://www.zzwws.cn/archives/2028/ https://www.zzwws.cn/archives/2028/ Wed, 04 Dec 2019 19:24:00 +0800 悠悠楠杉

1，响应式（自适应）移动站点
响应式/自适应站点做移动端，是用css进行屏幕大小的判断，给出一个合理的展现形式，当然了这种形式的移动站点，百度也是认可的，现在用的人也是比较多，那么他的优缺点都有那些那？

优点：

优点自然是有很多的，比如和PC端都是一个URL，不会变，同样的一个URL会同时获得PC和移动的双排名，是不是非常不错，而且管理简单，节约开发成本。最重要的是，收录了一个URL，就等于同时收录了PC和移动站点的URL，节约了优化成本。

缺点：

有优点自然也就有缺点，这种响应式（自适应）的站点，移动端打开速度是很慢的，因为需要一个判断的过程，css加载也是蛮多的，建议开发者可以进行合理的优化，另外，毕竟是一套程序，无法单独开发，如果你想单独更改移动端站点，是比较麻烦的，需要做大量的工作。

2，独立移动站点
独立移动站点，是目前第二多的移动展现形式，也是非常主流的，也是风雪比较推荐大家做的，下面我们说下优缺点。

优点：

因为移动站点是独立的，所以会单独获取一些排名，PC端的排名属于一部分，独立的移动站点又是一部分，另外独立移动端站点，扩展性好，可以单独开发，而且可以开发更多的功能，最重要的是，打开速度很快，不需要做判断等等，而且百度比较愿意给独立移动端站点排名的。

缺点：

缺点自然也是很明显的，开发工作量比较大，需要单独去进行开发，另外维护是比较麻烦的，等于两个站点，虚拟空间是无法进行搭建的，所以需要购买服务器，进行两个站点的搭建，需要去运营两个站点。

3，动态/移动站点
动态移动站点指的是，移动端是由代码进行适配的，并不是独立，或者自适应的，如果判断为手机访问，自动就会进行动态移动端的调用，这个并不是很常见，所以用的也比较少。

优点：

其实没什么优点，和自适应的优点相同，不需要单独的去管理移动端站点。节约开发成本，不消耗服务器，访问速度还是比较快。

缺点：

虽然百度认可这种移动模式，但是这种移动模式的收录并不是很好，所以很少有人会使用这种站点，并不利于移动SEO优化。

4，/m 二级目录移动站点
二级目录站点，大家应该很常见吧，就是织梦CMS使用的移动端方式，习惯于域名后面加一个/m，这种模式就不跟大家详细说了，因为这种模式百度已经不在认可了，不会让这种移动端获得好的排名的，所以大家就不要使用这种了。好了，今天风雪就为大家分享到这里。

]]> 0 https://www.zzwws.cn/archives/2028/#comments https://www.zzwws.cn/feed/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF/