精华内容
下载资源
问答
  • 移动端H5之动态设置html的font-size的横BUG修复以及横提示 by FungLeo前言在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖的情况.很显然,如果用户手机允许屏幕旋转,...

    移动端H5之动态设置html的font-size的横屏BUG修复以及横屏提示 by FungLeo

    前言

    在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.

    因此我们需要进行一个处理,来判断浏览器是否是横屏,在横屏的情况下,要使用高度值来计算html的font-size.

    代码

    因为项目引入了jquery,因此下面的代码全部是jquery语法.

    function htmlFontSize(){
        var win = $(window),
            winH = win.height(),
            winW = win.width(),
            hfz;
        winW > winH ? hfz = winH : hfz = winW;
        $("html").css('font-size',~~(hfz*100000/36)/100000+"px");
    }

    通过上面的代码,就可以在横屏的情况下正确的显示页面的大小了.但是,横屏的情况下,页面会变得比较怪异,应该给用户一个提示.

    百度了一下,找到了横屏的事件与解决方法.

    function orientationChange() {
        if (window.orientation==90 || window.orientation==-90){
            alert("横屏下不能获得最佳体验,建议竖屏浏览网页!");
        }
    };

    横屏提示代码如上.

    再然后,就是在正确的时候要执行这些函数了.

    $(function(){
        htmlFontSize();
        $(window).on("resize",function(){
            htmlFontSize();
        });
        orientationChange();
        $(window).on("orientationchange",function(){
            orientationChange();
        });
    });

    如上.效果是正确的.但是,好像我用了两个事件有点多余.因此,可以将代码整合到一个事件里面.

    $(function(){
        htmlFontSize();
        orientationChange();
        $(window).on("orientationchange",function(){
            htmlFontSize();
            orientationChange();
        });
    });

    这里需要提醒的是resize事件在PC上进行调试的时候还是很好用的.

    最后,这两个函数完全可以合并到一个函数里面.就不多写了.因为,领导说横屏下我做的效果还不错,就不用提示了:)

    本文由FungLeo原创,允许转载.但转载必须署名作者,并保留文章首发链接.否则将追究法律责任.

    首发地址:http://blog.csdn.net/FungLeo/article/details/51221622

    展开全文
  • html5canvas 的应用

    千次阅读 2015-07-27 15:20:25
    canvas在大多数的情况下是应用到html5 游戏中,但是最近接触到的一个项目是运用到绘制大量的图形上。 譬如有以下的需求,在一个固定的背景图上面绘制一个动态的时间。拿到这个需求,大部分搞过html5 开发的坑定...

    离屏canvas在大多数的情况下是应用到html5 游戏中,但是最近接触到的一个项目是运用到绘制大量的图形上。

    譬如有以下的需求,在一个固定的背景图上面绘制一个动态的时间。拿到这个需求,大部分搞过html5 开发的肯定知道具体的步骤怎么做,下面我简单说一下:

    1、先绘制背景。

    2、将时间格式化绘制到背景上面。

    3、清除canvas ,重复第一和第二步。

    js文件如下:

    $(document).ready(function() {
    
        var canvas = document.getElementById("canvas");
        canvas.width = 400;
        canvas.height = 400;
        var ctx = canvas.getContext("2d");
        setInterval(function(){
            ctx.clearRect(0,0,200,200);
            ctx.rect(0,0,400,400);
            ctx.fillStyle='blue';
            ctx.fill();
            var time = new Date().getTime();
            ctx.font='20pt Calibri';
            ctx.strokeStyle='red';
            ctx.strokeText(time,100,150);
        },1000);
    });
    

    这种方式应该是满足这个需求最好的方式。

    实际上在大多数的情况下这中方式也是比较不错的选择,但这个时候有一个更加复杂的需求,要求背景是比较复杂的图形,并且是很多对象组合而成的,例如下面这个仪表盘:

                                                                                    

    这是一个使用html5 绘制仪表盘,需求改变为每秒从后台获取当前的数值,然后指示到当前数值,这个时候再使用上述方式可能就不是很合适了。并且仪表盘的实现不是很麻烦,当背景数据达到3000个对象或者更多(html5中的线条)的时候,再来使用上述的方式进行绘制就不是很合适了。这个时候离屏canvas就派上用场了。

    针对最上面的需求修改后的js文件如下:

    $(document).ready(function() {
    
        var canvas = document.getElementById("canvas");
        canvas.width = 400;
        canvas.height = 400;
        var ctx = canvas.getContext("2d");
    
    
        var  offCanvas = document.createElement("canvas");
        offCanvas.width=400;
        offCanvas.height=400;
        var offContext = offCanvas.getContext("2d");
        offContext.rect(0,0,400,400);
        offContext.fillStyle='blue';
        offContext.fill();
        setInterval(function(){
            ctx.clearRect(0,0,400,400);
            ctx.drawImage(offCanvas,0,0);
            var time = new Date().getTime();
            ctx.font='20pt Calibri';
            ctx.strokeStyle='red';
            ctx.strokeText(time,100,150);
        },1000);
    });

    上面文件步骤如下:

    将静态数据绘制在离屏canvas上面,在当前的canvas上面绘制离屏canvas,在再将动态数据绘制在当前canvas上面,这样就能减少静态数据的绘制次数。


    展开全文
  • 网上关于这方面的文章有很,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该...

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。

    1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

    首先解释该标签的含义:

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    如果你完全不了解这个标签的使用需要先百度一下。

    解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。

    对于此标签还有以下需要分享:

    1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

    2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

    3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

    以上是使用viewport标签的一些小体会,分享给大家。

    2、第二种自适应屏幕尺寸的方法是将页面做成980宽度,在没有viewport标签的情况下,移动设备屏幕范围会显示页面980的宽度,如果页面大于980,则在屏幕范围内显示页面一部分,如果页面小于980,则页面居中两侧显示空白,那么你猜,如果页面宽度等于980会出现什么情况呢?

    3、百分比法,首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    4、使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

    解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。

    5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。

    综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法。

    展开全文
  • HTML5的meter和progress元素不再和表单相关,文档之外的单选按钮被关联到一个表单时将 进行分组 ,另外label表单属性的 behaviour 有了 更新 。outer元素现在必须有 标签 ,而隐藏的输入字段 则失去了这种能力 。...

            Chromium 版本库上周开发的重点包括许多表单相关的变化、电池状态API(注:电池状态即Battery Status API实际上是Device API里System Information API的一个组成部分)以及性能提升。

            所有无符号和浮点数的类型数组(注:它使得Javascript可以支持二进制数据,可以看看这篇文章)现在在开发者工具内将会显示为普通数组。获取堆的快照现在会比之前快12%另外准备在脚本面板中支持片段的工作也正在进行中。

    Sneak-peak: 使用颜色输入来创建平台的本地选择器

            HTML5的meter和progress元素不再和表单相关,文档之外的单选按钮被关联到一个表单时将进行分组,另外label表单属性的behaviour有了更新。outer元素现在必须有标签,而隐藏的输入字段则失去了这种能力。尽管之前被过,但是Chromium 对于颜色输入的支持现在看起来真的密不可分了。

            三星已经在着手在EFL库的移植上实现电池状态API。The MediaStream的PeerConnection实现已被弃用,因为它在向JSEP API演化。与此同时,Nikolas Zimmermann一直忙着实现animVal对于SVG的支持

            除了​​对Mozilla全屏API的支持, Webkit现在也支持非常相似的W3C全屏API。 它们的主要区别在于退出全屏时的方法和行为。

    上周的其它更新 :

            需要特别留意的两个补丁分别是在Chromium 上编译CSS着色器以及新的image-set CSS属性。 

            附:之前几周的重要更新:

            3.9日

            按照webkit-dev的公告,Hands开始着手一个初步的补丁来实现JavaScript Speech API(语音API)。

            2.24日

            三星的Kihong Kwon开始为Vibration API(震动API)实现一个初步的支持。

            来自蒋宇捷的博客,转载请注明。

    展开全文
  • 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更的是iphone6的375×667)。2)对于retina屏幕(如: dpr=2...
  • 移动页面HTML5自适应手机屏幕宽度

    万次阅读 2016-07-21 11:37:30
    网上关于这方面的文章有很,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。   1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是...
  • 如何进行PC端多屏适配

    千次阅读 2020-05-31 00:15:19
    如何进行PC端多屏适配 多屏适配的几种方法: 使用媒体查询,如 bootstrap等框架 制作设计图的时候,给一个固定的宽度,如1200,背景使用纯色,或者大背景图 使用rem 其他 这里介绍一下 rem 适配方案: 能够...
  • 标签:网上关于这方面的文章有很,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。 1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各...
  • 移动端高清、多屏适配方案

    千次阅读 2015-07-08 20:22:36
    移动端高清、多屏适配方案 背景 开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到...
  • 本节我们将要做一个跨互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨爱消除游戏。PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后,...
  • 手机、平板屏幕分辨率适配

    千次阅读 2013-04-15 20:25:11
    转自:http://www.apkbus.com/android-83006-1-1.html #本文参与——安卓巴士两周年征文活动#  最近因为android的发展广泛,应用逐渐增多,更的特性被人们了解,运行平台也逐渐扩大。 从最开始...
  • 话不说,开始分享干货,欢迎讨论!QQ微信同号: 6550523 ❤️效果展示❤️ 1、首先看动态效果图 2、再看实时分片数据图 3、丰富的主题样式 一、确定需求方案 1、确定产品上线部署的屏幕LED分辨率 ...
  • 大屏数据展示之数字滑动动态显示

    千次阅读 2019-03-25 16:58:00
    接到一个大屏数据的需求,要是实时展示用户数,并且动画效果是翻转显示,折腾了半个小时,写了一个demo出来,上代码 <html> <head> <script src="./jquery.min.js"></script> &...
  • 动态路由 Webpack 配置 路由配置 优化结果 背景 之前分别从原生层面以及 H5 层面对 HTML 的加载过程进行了分析,确定出加载的耗时主要出现在渲染阶段,但是页面本身并不复杂,dom 的结构也很简单,应该...
  • pwa应用动态添加到主屏幕

    千次阅读 2018-12-06 14:21:42
    PWA介绍 PWA(Progressive Web App),渐进式网页应用,2014年W3C公布Service Worker的相关草案,其生产环境在2015年被Chrome支持。如果将Servicce Worker出现的时间作为PWA...PWA不是特指某一项技术,而是应用了项...
  • 用 python 做一个动态可视化交互大屏

    千次阅读 2020-06-08 17:11:00
    你可能经常会在公司前台、展会、路演时看到可视化数据的交互大屏。今天我们就来用 python 做一个动态可视化的交互大屏图。一、项目背景随着科技的飞速发展,数据呈现爆发式的增长,任何人都摆...
  • HTML5+CSS3实现动态网页

    千次阅读 2019-08-15 11:20:33
    <a href="javascript:;" class="header_nav"> 其中javascript: 是一个伪协议。它可以让我们通过一个链接来调用...如果当页面里面的内容很的时候,有了上下滚动条,使用href=“#"会发生跳转到页面顶部的问题...
  • 本文包含两个部分   一, 1、屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 ...指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 ...手机可以有相同的分辨率,但
  • 由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活。随着手机的流行, 移动应用也快速的火了起来比如微...spring mvc +HTML5实现移动端底部上滑异步加载更内容分页效果的方式。
  • 动态向下箭头,实现整翻页

    万次阅读 2015-03-01 22:29:38
    可通过单击图标或向下滚动鼠标进行整滚动二、图标的实现过程 1.最开始我使用的方法是使用图片,但想要找到刚好适合的图片比较难 2.之后我使用的是bootstrap里的图标,不过效果也不尽人意(192, 192, 192);font-...
  • 1、动态效果图 2、实时分片数据图 3、丰富的背景样式 为了满足不同用户的审美需求,本案例实现了个背景样式: 一、确定需求方案 1、确定产品上线部署的屏幕LED分辨率 1280px*768px,...
  • 每周更新一篇技术博文,第七篇:《Android自适应屏幕与动态加载不同的子View》 此文所涉及内容网上资源比较,大部分内容都是引用别人的东西做个归类总结,最后简单实现个demo。 一、自适应分辨率 1....
  • 本文首发于我的个人博客:... 首先上效果图: 实现起来也是很简单的, 按照我的步骤一步一步来就可以了~ html代码首先要制作我们的页面,用到的是html5的新标签canvas;其实canvas就是我们需要用java
  • 默认你已经具备前端基础 html,css,js,jq这些基本知识都已经掌握。 什么是echarts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11...
  • 全屏滚动

    千次阅读 2016-04-04 21:44:20
    原文: ...在很情况下,我们需要页面的全屏滚动,尤其是移动端。今天简要的介绍一下全屏滚动的知识。 一.全屏滚动的原理 1.js动态获取屏幕的高度。
  • 作者:Tao Wang (Intel... 智能手机和平板电脑等移动设备通常采用敏感的电容式触控采集用户手指操作。 随着移动网络开始支持更加先进的应用,web 开发人员需要处理这些事件的解决方案。 例如,几乎任何快速游戏都需要
  • 开源超美css动态背景 可直接引入html文件使用 含注释、可更改 1.背景样式 本背景为动态蜘蛛网背景。 上图: 2.如何在html里面引用,作为html背景 1文件目录 放在同一目录下 2 在index.html内引用 &lt;html&...
  • 1、动态效果图 2、实时分片数据图 3、丰富的主题样式 为了满足不同用户的审美需求,本案例实现了个主题样式: chalk macarons roma westeros walden 一、确定需求方案 1、确...
  • 如何通过视频文件来制作gif动态

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,798
精华内容 45,119
关键字:

多屏动态html5