至尊技术网 - 移动端

MUI-最接近原生APP体验的高性能移动端框架

2022-02-18T14:04:00+08:00

追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件使用文档：https://dev.dcloud.net.cn/mui/ui/下载地址：https://zhizun.lanzouy.com/ilX7p009spad

jQuery WeUI专为微信公众号、移动端页面开发

2022-01-29T13:48:00+08:00

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服务，速度快并且很稳定： BootCDN 还提供了各个不同的版本，具体请参阅 jQuery WeUIBootCDN 是同步 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/

css移动端左右滚动导航栏

2021-07-16T17:52:00+08:00

方法一：inline-block和white-space和overflow-y先让子元素变成内联块，让子元素自动在父容器里面横行排列。display: inline-block; 再给父容器设置下面两条css样式，让子元素不换行且可以横行滚动。white-space: nowrap; overflow-y: auto; 不想让滚动条出现的话，参考上面那种方法里面的隐藏滚动条的方法。 Document

方法二：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），则项目将占据固定空间。 Document

移动端h5页面meta标签

2020-04-22T17:28:00+08:00

JS、PHP判断用户端类型并进行不同链接跳转

2020-04-13T16:54:00+08:00

网页通常需要适配PC端和移动端，适配可以通过响应式布局如bootstrap框架判断屏幕尺寸来展示不同的效果，还可以通过编写两个页面，也就是PC端和移动端分别写一个页面，这种方式更方便功能模块的编写，但需要花费更多的人力。在编写了两个页面时，都是用同一个域名解析，但在实际页面加载时要加载到对应的页面，所以需要判断设备的类型，如下：将代码放在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'); }

移动端网站SEO优化该怎样做（响应式/独立）？

2019-12-04T19:24:00+08:00

1，响应式（自适应）移动站点响应式/自适应站点做移动端，是用css进行屏幕大小的判断，给出一个合理的展现形式，当然了这种形式的移动站点，百度也是认可的，现在用的人也是比较多，那么他的优缺点都有那些那？优点：优点自然是有很多的，比如和PC端都是一个URL，不会变，同样的一个URL会同时获得PC和移动的双排名，是不是非常不错，而且管理简单，节约开发成本。最重要的是，收录了一个URL，就等于同时收录了PC和移动站点的URL，节约了优化成本。缺点：有优点自然也就有缺点，这种响应式（自适应）的站点，移动端打开速度是很慢的，因为需要一个判断的过程，css加载也是蛮多的，建议开发者可以进行合理的优化，另外，毕竟是一套程序，无法单独开发，如果你想单独更改移动端站点，是比较麻烦的，需要做大量的工作。2，独立移动站点独立移动站点，是目前第二多的移动展现形式，也是非常主流的，也是风雪比较推荐大家做的，下面我们说下优缺点。优点：因为移动站点是独立的，所以会单独获取一些排名，PC端的排名属于一部分，独立的移动站点又是一部分，另外独立移动端站点，扩展性好，可以单独开发，而且可以开发更多的功能，最重要的是，打开速度很快，不需要做判断等等，而且百度比较愿意给独立移动端站点排名的。缺点：缺点自然也是很明显的，开发工作量比较大，需要单独去进行开发，另外维护是比较麻烦的，等于两个站点，虚拟空间是无法进行搭建的，所以需要购买服务器，进行两个站点的搭建，需要去运营两个站点。3，动态/移动站点动态移动站点指的是，移动端是由代码进行适配的，并不是独立，或者自适应的，如果判断为手机访问，自动就会进行动态移动端的调用，这个并不是很常见，所以用的也比较少。优点：其实没什么优点，和自适应的优点相同，不需要单独的去管理移动端站点。节约开发成本，不消耗服务器，访问速度还是比较快。缺点：虽然百度认可这种移动模式，但是这种移动模式的收录并不是很好，所以很少有人会使用这种站点，并不利于移动SEO优化。4，/m 二级目录移动站点二级目录站点，大家应该很常见吧，就是织梦CMS使用的移动端方式，习惯于域名后面加一个/m，这种模式就不跟大家详细说了，因为这种模式百度已经不在认可了，不会让这种移动端获得好的排名的，所以大家就不要使用这种了。好了，今天风雪就为大家分享到这里。