我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签:一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content…
手机端的META你了解多少? 我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签:一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equi…
我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签: 一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Conten…
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use…
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use…
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use…
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use…
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东西,并且听了一位有经验同事的讲解,顿时豁然开朗,现在对于手机端的页面开发,可以说胸中有一点丘壑了.rem最能打动我的地方在于,他不会改变原来在PC端的代码书写习惯,只是把计量单位换了一下,所以迫不及待的拥抱他了! 具体用法贴出如下: 1.html文档(当然是html5)的头部添加一个meta标签声明…
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux;   比较顺利吧. 2.导入组件: import {ViewBox, XHeader, Tabbar, TabbarItem} from 'vux'export default { name: 'app', components: {ViewBox, XHeader, Tabbar, TabbarItem}} 报错!原因是vux内…
1.产品的背景 课堂上知识容量大.密度高,学生不能立刻掌握所学知识点,同时,网上资料冗杂繁复,指向性不强,导致学生不能高效的学习,为了充分利用学生的课余时间,培养学生自学能力,辅助老师教学,我们小组希望完成一“知识共享平台”,针对大一学生开设的课程划分模块,收录各科经典的题目,配备详尽的说明,为不能适应大学节奏的学生梳理清各科结构框架,知识点分布情况. 同时本着开源精神,惠及信息学院的广大学子,我们将基础的.经典的.不同语言的源代码与学弟.学妹们分享,便于沟通学习! 2 产品的功能 帮助学生整理…
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use…
在上一篇<13.阿里云IoT Studio WEB监控界面构建>中,我们介绍了用阿里云IoT Studio(原Link Develop)可视化构建WEB界面程序.本篇文章将介绍用阿里云IoT Studio打造手机端APP. 和WEB开发类似,可以通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现.不过支持的组件相对于WEB可视化相对少一些,如下图所示: 一 阿里云云端设备创建 操作步骤 1) 登陆物联网平台控制台 2) 创建产…
1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,u…
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上…
<!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var userAgent = navigator.userAgent;         documentElement = document.documentElement;         if (userAgent.match(/micromessenger\/5/gi)) {             document…
<!doctype html><html>    <head>            <meta http-equiv="Content-Type" content="text/html;charset=utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu…
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Le…
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv…
效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=…
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够平滑,而且,在移动端H5页面中很多人使用的js库是zeptoJS,所以要想使用animate方法还要额外引用一个fx.js的插件,这无疑又增加了页面的体积,增加了服务器的请求负担,这显然不是最好的解决办法.那么,今天,本人就给大家分享一个利用css3的transform并结合transition来实…
最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 现在客户用一个需求是这样的 图一                                                                                  图2                                                  …
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Android|iPod|BlackBerry|"; var defExcludeStr = ""; var redirectUrl = ""; var metas = document.getElementsByTagName("meta");…
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的. 因为最近也是刚刚用,还在摸索中,有兴趣的朋友可以研究下.如有问题,还请见谅.(ps只有新的页面或者项目适用,不适于用二开的项目避免发生不必要的问题) <script type="text/javascript">        var phoneW…
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js"></script>下面是JS代码:$(document).ready(function(){ //手势右滑 $('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){ // 执行一些动作..…
之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" co…
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/ 3.今天在上班,等晚上我再详细介绍一下,么么哒..…
这个问题其实很早就考虑了,当时因为也没有特别着急去解决这个问题,就一直拖着.... 好吧,拖延症是不好的,所有不懒得做的,终将会逼着你去再很短的时间内去解决问题...实现项目 改写一个已有的webform项目,需要手机端和WEB端的数据保持互通,所以第一反应当然是abp了,既可以学习,也可以完成任务 在试着调用的api的时候就遇到了cors跨域请求的问题,之前很迷茫练cors是什么都不知道,这次也知道了.解决问题,带着问题去看文档 http://aspnetboilerplate.com/Pag…
该资源说明: cocos2d 棋牌.捕鱼.休闲类游戏<李逵捕鱼>手机端完整源码,网狐6603配套手机版源码,可以选桌子,适合新手学习参考,小编已亲测试,绝对完整可编译手机端,下载后将文件考到projects文件下面直接编译运行. 引擎版本:cocos2dx-2.2.6 资源下载:http://www.zccode.com/forum.php?mod=viewthread&tid=618&page=1&extra=#pid9095    …
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里我们不去详细去讲解,这个放到后面响应式章节讲解,这里简单使用即 可. /*媒体查询,大于480小于640*/ @media (min-width:480px) and (max-width:640px) { #tour h2 { font-size: .26rem; } #tour h3 { fon…
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去除所有元素的内外边距*/ *{ margin:; padding:; } /*去除所有ul里li的小圆点*/ ul{ list-style-type: none; } /*去除所有a的下划线*/ a{ text-decoration: none; } /*将图片转换成区块,将图片最大宽度设置成100%,使图片…