移动互联网终端 | 易学教程

GGTalk即时通讯系统（支持广域网）终于有移动端了！（技术原理、实现、源码）

阅读更多关于 GGTalk即时通讯系统（支持广域网）终于有移动端了！（技术原理、实现、源码）

首先要感谢大家一直以来对于GGTalk即时通讯系统的关注和支持！GGTalk即时通讯系统的不断完善与大家的支持分不开！从2013年最初的GG1.0开放源码以来，到后来陆续增加了网盘功能、远程协助功能、离线文件功能、群聊功能、语音聊天功能、视频聊天功能、以及视讯录制功能、和增加了数据库——一路走来，结识许多朋友，大家不仅对GGTalk即时通讯系统的源码提了许多宝贵的建议，我还有幸与某些朋友取得了项目上的合作，这一切都是美妙的缘分！一直以来，GGTalk即时通讯系统的移动端始终是一个缺憾。前段时间刚好结识了一位做 android开发的朋友，他也很有兴趣参与，于是GGTalk即时通讯系统的移动端也借此契机而诞生了！本文我主要是想为大家介绍一下打通PC端和移动端背后的基本原理，并以GGTalk即时通讯系统的android版作为示例demo供大家参考。当然，这个demo只是完成了GGTalk客户端全部功能的一小部分，以后我们会陆续将更完善的版本分享给大家。想要直接下载体验的朋友请点击： “下载中心” 一.先睹为快本次的GGTalk即时通讯系统安卓demo已实现如下功能：（1）登录服务端（2）文字聊天，表情图片,消息提醒（3）好友列表（4）显示好友在线状态（5）文件传输二.基本原理打通不同平台的客户端中间相互通信，需要满足以下几个条件： 1.

移动端页面适配

阅读更多关于移动端页面适配

前端开发中，尤其移动端手机屏幕大小各异，该如何解决页面适配的问题呢？下面从几点进行了总结。 1、设计稿的布局设计　　我们在进行H5页面内容规划布局设计的时候，不能把重要的内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。除去将浏览器全屏显示的情况，几乎所有的情况都会有顶部的状态栏和导航栏。　　iphone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。　　由于安卓系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px。　　那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下）取这两个系统者的最大值为148，设计稿要尽量保证单页下面148px没有重要内容。　　那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640*960px（iphone4分辨率）之上，所以只要把重要内容放在盲区之上即可，计算后的最安全高度为812（960-148=812）。　　在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640*1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。 2、相对单位rem的使用　　手机页面设计一般的大小是640，但是手机屏幕大小不确定

[笔记]移动端的 viewport 和各种像素区分

阅读更多关于 [笔记]移动端的 viewport 和各种像素区分

一、关于移动端的viewport 1 简介设备的宽度是移动设备浏览器和桌面浏览器的最大区别，移动设备的屏幕宽度被桌面浏览器小，经常最大就400px。移动设备浏览器厂商期望它们的客户端在浏览PC页面时，能提供更像桌面浏览器的体验。因为viewport太窄，不能很好为你的基本CSS布局服务了。最显然的解决方法是让viewport更宽。因此这个需求分为了2个方面：visual viewport和layout viewport。 visual viewport是当前显示在屏幕上的页面的一部分。一般来说，layout viewport比visual viewport要宽得多，并且包含出现在屏幕上的元素。设想layout viewport是一个大的图像，它不会改变大小或形状。现在假设你有一个较小的框，通过它你可以看到大的图像。小的框被不透明的材料包围，遮盖了所有的视图，除了大图像的一部分。可以通过框架看到大图像的部分是visual viewport。你能改变这个框的方向，但这样图片的大小和形状都不会改变。每个移动端浏览器的layout viewport的宽度都不同。下图列出了一些设备上浏览器的默认viewport宽度。 layout viewport的尺寸为document.documentElement.clientWidth/clientHeight。 visual

1px 究竟是多大

阅读更多关于 1px 究竟是多大

一、引言　　1px 究竟是多大？这应该是一道很不错的面试题。且看：　　1、iphone6s 的分辨率是1920px * 1080px 　　2、iphone6s 全屏截图文件的尺寸是1242px * 2208px 　　3、iphone6s 的宽度是414px 　　4、iphone6s 不加 viewport 的情况下，window.innerWidth = 980px 　　5、iphone6s 加 viewport 且 scale 都为1的情况下，window.innerWidth = 414px 　　6、iphone6s 加 viewport 且 scale 都为.5的情况下，window.innerWidth = 829px 　　这些 px 单位都是啥？二、几个关键概念　　设备像素：设备的物理像素，其尺寸大小是绝对的　　逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素　　分辨率：屏长的设备像素 × 屏宽的设备像素　　dpi（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目　　ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目　　（dpi 和 ppi 其实不就是一回事吗，呵呵）　　缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可通过 window

移动端屏幕自适应布局

阅读更多关于移动端屏幕自适应布局

1、技术点移动端自适应采用百分比布局比较适合。需要说明一点的是：height的百分比是以父元素的宽度计算的，由于移动端父元素宽度有时没有给定值（如父元素宽度为100%），此时子元素的height就为0。因此子元素的高度值使用padding-top或者padding-bottom撑起。同时height的高度设置为0，防止font-size或line-height等属性影响到height。 2、示例示例为展示图片，每行展示3个图片。每列图片宽度33%，图片间距为0.5%。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="author" content="Tencent-TGideas" /> <meta name="Copyright" content="Tencent" /> <title>实例-图片列表</title> <style> * { margin: 0; padding: 0; } ol, ul { list-style: none; } html,

Safari 导航栏

阅读更多关于 Safari 导航栏

目录引子隐藏 Safari 导航栏显示 Safari 导航栏 iPhone 系统占比参考资料引子最近在 iPhone 的 Safari 查看 h5 页面时，发现有些平台的页面向下滚动时，顶部地址栏和底部导航栏会自动收起，整个页面空间多了不少，可以看到更多信息，这种效果比较适合当前业务场景。之前都没怎么关注这个，查找了一些资料，尝试后总结一下。 Origin My GitHub 隐藏 Safari 导航栏当页面内容过多，向下滚动时，导航栏和地址栏收起的现象，在 Safari 是正常的特性，以下称为默认隐藏。这是一个纯显示页面，移动端访问如下：默认隐藏通过查找资料和对比其它平台的页面，主要的思考方向是页面结构和 CSS 样式。首先想到在项目里面常会引入一个重置样式的库 normalize.css ，看下是否会影响这个效果。这是测试页面，移动端访问如下：测试结果是：不会影响。然后就是对比页面结构，发现了下面几种情况：滚动容器非 body 元素，默认隐藏无效。这是示例页面，移动端访问如下：滚动容器为 body 元素，html 设置了样式 overflow: hidden ，默认隐藏无效。这是示例页面，移动端访问如下：滚动容器为 body 元素，html 默认样式，默认隐藏有效。这是示例页面，移动端访问如下：一直隐藏

移动端软键盘遮挡问题

阅读更多关于移动端软键盘遮挡问题

文章目录 scrollIntoView 介绍 1.利用 scrollIntoView 实现防遮挡 2.利用 scroll 实现防遮挡 scrollIntoView 介绍移动端的H5页面，当输入框元素获取焦点时，会吊起软键盘，如果输入框被软键盘遮挡了，则页面会发生滚动使输入框显示在可视区。浏览器这种默认处理机制在元素设置了绝对定位或设置了 html,body{height:100%;} 时可能会失效，通常需要手动处理。防软键盘遮挡的处理思路： IOS系统中，软键盘吊起时，整个 window 往上滚，window的宽高不变，不会触发window.onresize 事件。并且，软键盘始终不会遮挡输入框，所以在ios中不处理。有些版中的微信页面存在页面不回滚的bug，这个需要处理。安卓系统中，软键盘吊起时，window 不滚动，window的高度减小，减少值等于软键盘的高度，会触发 window.onresize 事件。如果输入框被遮挡，可使用 scrollIntoView 方法强制在可视区显示获取焦点的输入框元素。让当前的元素滚动到浏览器窗口的可视区域内方法。 MDN scrollIntoView() 浏览器支持度较高（推荐）。 scrollIntoViewIfNeeded() 部分浏览器支持，懒滚动模式。 scrollIntoView() Element

移动端开发的兼容问题（自我总结篇）

阅读更多关于移动端开发的兼容问题（自我总结篇）

移动端开发的兼容问题文章已同步我的github笔记 https://github.com/ymblog/blog ，欢迎大家加star~~ 1、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。解决方案:使用opacity=1来解决 2、对非可点击元素如(label,span)监听click事件，部分ios版本下不会触发。解决方案:css增加cursor:pointer就搞定了 3、移动端1px边框解决方案：比如按钮的box的class为btn .btn:before{ content:''; position: absolute; top: 0; left: 0; border: 1px solid #ccc; width: 200%; height: 200%; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } 4、input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input

Mint UI教程汇总

阅读更多关于 Mint UI教程汇总

Vue移动端框架Mint UI教程-搭建环境引入框架（一） https://www.jianshu.com/p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏（二） https://www.jianshu.com/p/56e887cbb660 Vue移动端框架Mint UI教程-组件的使用（三） https://www.jianshu.com/p/5ec1e2d2f652 Vue移动端框架Mint UI教程-跳转新页面(四) https://www.jianshu.com/p/364d0462ddb6 Vue移动端框架Mint UI教程-调用模拟json数据(五) https://www.jianshu.com/p/6d3f1436b327 Vue移动端框架Mint UI教程-数据渲染到页面（六） https://www.jianshu.com/p/dc532ab82d2a Vue移动端框架Mint UI教程-接口跨域问题（七） https://www.jianshu.com/p/b28cd8290b2a 作者：祈澈菇凉链接：https://www.jianshu.com/p/6295ee6974c9 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。来源： https://www.cnblogs.com/rxbook/p

跨终端电子商务网站的实现

阅读更多关于跨终端电子商务网站的实现

本系统从前端到后台实现了电子商务网站。页面实现了两套，分别用于PC端以及手机端。后台实现了用户的登录注册、加入购物车、结算功能，以及非常简单的商品信息录入功能。前端页面使用的JS库是jQuery，对于手机端手势功能是自己实现的没有采用第三方JS库。后台使用的语言是Node，采用Express框架。数据库方面使用MongoDB，使用mongoose简化操作。先看下实现的效果： 1.PC端首页效果 2.PC端登录页 3.PC端详情页面 4.PC端购物车页面 5.PC端支付页面 6.移动端首页 7.移动端登录页面 8.移动端注册页面 9.移动端详情页面 10.移动端详情加入购物车规格选择效果 11移动端购物车页面 12.移动端支付页面 13.移动端搜索页面查看完整项目可以去我的 GitHub ，欢迎大家的下载、提问和关注哈。项目的目录结构是：系统的入口文件在根目录下的ecdb.js。脚本、样式表、图片等资源存放于public目录下，页面存放在views目录下。因为系统涉及了数据库，所以下载后不能直接运行。需要安装并正确配置MongoDB数据库，如果本文章收到较好的反馈，我会在以后添加一个无数据库的版本以供大家查看项目实际效果。并在后期再readme文件中加入更加详细的说明。最后谢谢大家的阅读，欢迎有兴趣的童鞋到我的 GitHub 添加关注，谢谢了！来源： https:/

订阅移动互联网终端