SEO优化流程

CP规范dinghn 发表了文章 • 0 个评论 • 420 次浏览 • 2017-05-10 15:45 • 来自相关话题

SEO优化流程:
在接到需求时,请需求人提供该页面Title、Keywords、Description信息以确保每个页面部署不一样、有页面含义的内容(如果需求人不了解,请将附件转发给需求人,若遇到不配合可以反馈给lucy,我们内部统一催办)。
⑴、页面Title
⑵、页面Keywords
⑶、页面Description
以上三个字段都是必选项,大家在工作中不能照搬官网,更不能为空。
反面案例:






QQ炫舞每日一签专题活动,与炫舞官网description、keywords一致,链接:http://x5.qq.com/cp/a20170425signH5/index.htm 

标准案例:






了解详细SEO规范要求,请点击http://tguide.qq.com/main/whitepeper.htm#part2-2-1 
Title:出现在浏览器的顶部,与本页面内容最符的关键词。字数控制在28个汉字以内,可用英文( - 或 | )隔开,每个页面的标题都要不同,并且与页面内容相匹配 (注:杜绝不同页面标题重复现象),不建议放Slogan等品牌宣传词。
Keywords:除了title和H1标签之外比较重要的标签。一般要出现核心关键词,以及一些热门长尾关键词等,关键词之间使用英文逗号(,)隔开,不重复的5-6个最佳。
Description:对本页面内容的概括,以及尽量反映出网页的内容情况,更是对所做关键词进行适当的描述扩展,并且用通顺的句子说明页面主题,数字在80字之间。 查看全部
SEO优化流程:
在接到需求时,请需求人提供该页面Title、Keywords、Description信息以确保每个页面部署不一样、有页面含义的内容(如果需求人不了解,请将附件转发给需求人,若遇到不配合可以反馈给lucy,我们内部统一催办)。
⑴、页面Title
⑵、页面Keywords
⑶、页面Description
以上三个字段都是必选项,大家在工作中不能照搬官网,更不能为空。
反面案例:

image001(05-09-1(05-09-10-30-22).png


QQ炫舞每日一签专题活动,与炫舞官网description、keywords一致,链接:http://x5.qq.com/cp/a20170425signH5/index.htm 

标准案例:

image003(05-09-1(05-09-10-30-22).png


了解详细SEO规范要求,请点击http://tguide.qq.com/main/whitepeper.htm#part2-2-1 
Title:出现在浏览器的顶部,与本页面内容最符的关键词。字数控制在28个汉字以内,可用英文( - 或 | )隔开,每个页面的标题都要不同,并且与页面内容相匹配 (注:杜绝不同页面标题重复现象),不建议放Slogan等品牌宣传词。
Keywords:除了title和H1标签之外比较重要的标签。一般要出现核心关键词,以及一些热门长尾关键词等,关键词之间使用英文逗号(,)隔开,不重复的5-6个最佳。
Description:对本页面内容的概括,以及尽量反映出网页的内容情况,更是对所做关键词进行适当的描述扩展,并且用通顺的句子说明页面主题,数字在80字之间。

用纯CSS写横屏(竖屏)提示组件

前端技术分享qiao 发表了文章 • 0 个评论 • 351 次浏览 • 2017-05-09 10:10 • 来自相关话题

用纯CSS写横屏提示组件的优点:

1、使用方便,只要在共用CSS文件插入CSS代码,所有页面都能实现提示功能

2、零http请求,不需要引入JS文件,也不会阻塞页面的渲染,图片是base64,代码量也是非常非常少

3、视觉可以自定义,改一下CSS换一下图片,还可以是动画哦,简直不能再简单(不能自定义设计师会不开心的)

使用方法

提示用户竖屏浏览页面

代码如下,使用方法:将CSS代码粘贴到共用CSS文件中或是head标签内@media all and (orientation : landscape ) and (max-height:751px){
html,body { position:relative; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
html::after {content: "为了更好的体验,请将手机竖过来"; text-align:center; font-size:16px; color:#fff; position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:50px; z-index:99999; }
body::before { content: "";position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-140px 0 0 -50px; color:#fff;background:url([url=https://game.gtimg.cn/images/yxzj/act/a20160510story/20170110/iphone.pn]https://game.gtimg.cn/images/y ... ne.pn[/url]g) no-repeat center center; background-size:100px auto; -webkit-transform:rotateZ(-90deg); }
}








视觉图                                                          演示DEMO

 
提示用户横屏浏览页面

代码如下,使用方法:将CSS代码粘贴到共用CSS文件中或是head标签内@media all and (orientation : portrait ) and (max-width:600px){
html,body { position:relative; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
html::after {content: "为了更好的体验,请将手机横过来";position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:30px; z-index:99999; text-align:center; font-size:16px; color:#fff; }
body::before { content: ""; position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-160px 0 0 -50px; color:#fff; background-size:100px auto;}
}







视觉图                                                          演示DEMO

 
如果喜欢使用外联引用CSS文件可以引入下面的URL

提示用户竖屏浏览页面

http://tgideas.qq.com/rotatingPrompt/landscape.css

提示用户横屏浏览页面

http://tgideas.qq.com/rotatingPrompt/portrait.css

图片转base64工具

http://tool.css-js.com/base64.html 查看全部
用纯CSS写横屏提示组件的优点:

1、使用方便,只要在共用CSS文件插入CSS代码,所有页面都能实现提示功能

2、零http请求,不需要引入JS文件,也不会阻塞页面的渲染,图片是base64,代码量也是非常非常少

3、视觉可以自定义,改一下CSS换一下图片,还可以是动画哦,简直不能再简单(不能自定义设计师会不开心的)

使用方法

提示用户竖屏浏览页面

代码如下,使用方法:将CSS代码粘贴到共用CSS文件中或是head标签内
@media all and (orientation : landscape ) and (max-height:751px){ 
html,body { position:relative; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
html::after {content: "为了更好的体验,请将手机竖过来"; text-align:center; font-size:16px; color:#fff; position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:50px; z-index:99999; }
body::before { content: "";position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-140px 0 0 -50px; color:#fff;background:url([url=https://game.gtimg.cn/images/yxzj/act/a20160510story/20170110/iphone.pn]https://game.gtimg.cn/images/y ... ne.pn[/url]g) no-repeat center center; background-size:100px auto; -webkit-transform:rotateZ(-90deg); }
}

1488286490_43_w378_h244.png
1488352234_53_w186_h185.png


视觉图                                                          演示DEMO

 
提示用户横屏浏览页面

代码如下,使用方法:将CSS代码粘贴到共用CSS文件中或是head标签内
@media all and (orientation : portrait ) and (max-width:600px){ 
html,body { position:relative; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
html::after {content: "为了更好的体验,请将手机横过来";position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:30px; z-index:99999; text-align:center; font-size:16px; color:#fff; }
body::before { content: ""; position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-160px 0 0 -50px; color:#fff; background-size:100px auto;}
}

1488286534_10_w330_h256.png
1488341836_76_w185_h184.png

视觉图                                                          演示DEMO

 
如果喜欢使用外联引用CSS文件可以引入下面的URL

提示用户竖屏浏览页面

http://tgideas.qq.com/rotatingPrompt/landscape.css

提示用户横屏浏览页面

http://tgideas.qq.com/rotatingPrompt/portrait.css

图片转base64工具

http://tool.css-js.com/base64.html

UP2017预热站前端解析

前端技术分享dinghn 发表了文章 • 0 个评论 • 105 次浏览 • 2017-04-28 10:08 • 来自相关话题

 线上地址:

在UP 2017预热站中,页面使用了粒子效果,点击UP2017预热站先看一下效果
------------------------------------------------------------------------------------------
30秒快问快答

Q:这个H5用到了什么技术?背景是视频吗?
A:首先,这个其实是个PC站点,最初也没有计划在手机上浏览。背景不是视频,是WebGL,实现上用的是包装好的three.js库

Q:模型是怎么做的?
A:和普通的3D建模一样,常规的3D建模软件即可;然后使用插件导出为three.js可方便读取的JSON格式

Q:花了多久时间?
A:这个项目设计和前端是从2月底开始的,然后4月初页面基本完成。期间包括了前期的技术预研、可行性评估等;和我平时遇到的项目不同的是,这次的设计和前端两者是同步进行的。
------------------------------------------------------------------------------------------
流程总览

今年UP2017主题为 奇点·共生,如果使用粒子效果来营造效果,会非常契合主题!于是就有了下文。

我花了10天左右的时间,弄出来一个初始的Demo,实现了粒子的展现、变换。和大家讨论了下,觉得效果不错,于是便继续沿着这个方向下去。

设计和前端同步进行:3D建模然后转换格式,再导入页面,并使用JS控制动画、交互。
 
点击阅读全部》》
  查看全部

QQ截图20170428101003.png

 线上地址:

在UP 2017预热站中,页面使用了粒子效果,点击UP2017预热站先看一下效果
------------------------------------------------------------------------------------------
30秒快问快答

Q:这个H5用到了什么技术?背景是视频吗?
A:首先,这个其实是个PC站点,最初也没有计划在手机上浏览。背景不是视频,是WebGL,实现上用的是包装好的three.js库

Q:模型是怎么做的?
A:和普通的3D建模一样,常规的3D建模软件即可;然后使用插件导出为three.js可方便读取的JSON格式

Q:花了多久时间?
A:这个项目设计和前端是从2月底开始的,然后4月初页面基本完成。期间包括了前期的技术预研、可行性评估等;和我平时遇到的项目不同的是,这次的设计和前端两者是同步进行的。
------------------------------------------------------------------------------------------
流程总览

今年UP2017主题为 奇点·共生,如果使用粒子效果来营造效果,会非常契合主题!于是就有了下文。

我花了10天左右的时间,弄出来一个初始的Demo,实现了粒子的展现、变换。和大家讨论了下,觉得效果不错,于是便继续沿着这个方向下去。

设计和前端同步进行:3D建模然后转换格式,再导入页面,并使用JS控制动画、交互。
 
点击阅读全部》》
 

hello,test

回复

常见问题admin1 发起了问题 • 0 人关注 • 0 个回复 • 109 次浏览 • 2017-04-20 02:13 • 来自相关话题

UP2017腾讯互娱年度发布会

技术交流dinghn 发表了文章 • 0 个评论 • 128 次浏览 • 2017-04-19 20:43 • 来自相关话题

   4月10日,腾讯互动娱乐(以下简称腾讯互娱)宣布,UP2017腾讯互娱年度发布会将于4月20日在北京国家会议中心举办。有关腾讯互娱泛娱乐战略布局的最新动向,以及互娱旗下游戏、动漫、文学、影视、电竞五大泛娱乐品牌与产品业务的重要举措,都将在本次发布会上集中发布。
      这也是自去年年底,腾讯电竞成立后,腾讯互娱五大业务组成的全新泛娱乐业务矩阵首度集体亮相。
      作为国内领先的互动娱乐内容服务提供商、泛娱乐概念的首倡者与泛娱乐产业最重要的推动者之一,腾讯互娱一年一度的UP发布会,被认为是互动娱乐产业的年度风向标,历届均受到业界与媒体高度关注。

发布会主题“奇点.共生” 互娱迎来业务共生长新起点
本届发布会主题为“奇点•共生”。
围绕奇点这次站点首页实现的动画效果,具体看下图吧。

主要是使用three.js来实现动画粒子效果,预览[猛戳这里]  关于技术分享文章,敬请期待。 查看全部
   4月10日,腾讯互动娱乐(以下简称腾讯互娱)宣布,UP2017腾讯互娱年度发布会将于4月20日在北京国家会议中心举办。有关腾讯互娱泛娱乐战略布局的最新动向,以及互娱旗下游戏、动漫、文学、影视、电竞五大泛娱乐品牌与产品业务的重要举措,都将在本次发布会上集中发布。
      这也是自去年年底,腾讯电竞成立后,腾讯互娱五大业务组成的全新泛娱乐业务矩阵首度集体亮相。
      作为国内领先的互动娱乐内容服务提供商、泛娱乐概念的首倡者与泛娱乐产业最重要的推动者之一,腾讯互娱一年一度的UP发布会,被认为是互动娱乐产业的年度风向标,历届均受到业界与媒体高度关注。

发布会主题“奇点.共生” 互娱迎来业务共生长新起点
本届发布会主题为“奇点•共生”。
围绕奇点这次站点首页实现的动画效果,具体看下图吧。

主要是使用three.js来实现动画粒子效果,预览[猛戳这里]  关于技术分享文章,敬请期待。

在ie7下,视频始终是最高层级的怎么办

回复

提问求助新用户 发起了问题 • 0 人关注 • 0 个回复 • 137 次浏览 • 2017-04-13 13:12 • 来自相关话题

求解决腾讯视频“静音”功能的实现

前端技术分享pentest_demo 发表了文章 • 0 个评论 • 104 次浏览 • 2017-01-15 21:29 • 来自相关话题

求解决腾讯视频“静音”功能的实现
求解决腾讯视频“静音”功能的实现

体验用JS开发硬件

前端技术分享qiao 发表了文章 • 0 个评论 • 129 次浏览 • 2016-12-23 22:20 • 来自相关话题

                                      
简介:前端开发者可以通过Ruff,使用自己熟悉的Javascript脚本语言进行硬件开发,从而将更多的注意力集中在应用逻辑上。
                                                                                                                                                       
Ruff 是什么

官方说法:Ruff 是一个支持 JavaScript 开发应用的物联网操作系统。Ruff 跨平台、可以支持各种硬件,例如树莓派等。


为了便于理解,下文说的 Ruff 都特指其官方的开发套件,如上图,包含一些传感器,如光线感应、按钮、温湿度传感器、红外接受发送模块等。中间最大的那块就是 Ruff 开发套件的主板了。

通过 Ruff 提供的js运行时,前端er可使用熟悉的js代码来控制连接在板上的设备模块,而不用关心底层实现,因为Ruff已经对硬件进行了抽象。

因而可以在几乎没有硬件基础的情况下获取电子元件的数据(比如温湿度)、操作电子元件(比如控制LCD的显示、LED灯),然后用代码把它们的逻辑连接起来,即,使用js来控制物理设备

逻辑部分代码和平时Web端的js代码一样,下面是官方的快速开始的Demo:// 在 `#button` 按下时点亮 `#led-r`.
$.ready(function(error) {
$('#button').on('push', function() {
$('#led-r').turnOn();
});
});
 
以上就是“按下按钮点亮LED”的逻辑实现的全部代码,是不是非常熟悉的味道。

那么整个开发流程是怎样的?

开发流程在Ruff官网上已有相关详细介绍,这里用自己的理解来简化一下:

1.使用Ruff的SDK在电脑上建立项目目录,告知需要用到的元件
2.使用Ruff的SDK来查看元件的连线,并把元件和Ruff主板连接起来
3.使用你喜欢的文本编辑器,比如sublime text、webstorm来编写逻辑代码
4.通过电脑把项目整个目录部署到Ruff主板上
5.Ruff主板可以脱离电脑啦,以后只要给Ruff主板通电,就会自动执行之前部署上去的代码

 

实操,做个颜色可调的LED

说了这么多,终究有些抽象,下面用10分钟来做一个变色的灯。

效果是:按下按钮灯光颜色循环,释放按钮则灯光停留在释放瞬间的颜色。

所以,需要的元件是按钮、支持3原色的LED灯。先从Ruff的开发套件中翻出来这两个元件:
 



顺便提一下,元件的包装袋上面有它的型号(包装底部的网址的最后黄颜色字体部分),后面会用到,同时那个url就是该元件API的文档地址。

在电脑上新建项目目录

安装完Ruff提供的SDK后,在命令行窗口中执行rap init进行项目创建,非常类似npm的init,填写标题描述作者之类的。


然后使用rap device add #元件自定义id 来为该项目添加元件(按钮和LED),元件的id用途是在逻辑代码中$('#元件id')来选中设备元件,名称可自定义。执行之后,下一步会询问要添加的元件的型号,即之前包装袋上的黄颜色部分。


在类似对话式建立项目之后,项目的结构图如下。经过添加设备,ruff_modules目录下增加了相应的设备元件目录,其中包含了驱动的代码。

项目就算是初始化好了,Ruff会自动计算出连线方式,执行rap layout —visual 弹出可视化的连线说明,按图示连上主板。 

  

上面的准备好了之后,剩下的就是逻辑的代码啦,在项目下src目录中的index.js文件中。

编写逻辑代码

因为我们是做一个变色的灯,根据人眼的自然习惯,使用HSL颜色模型,固定饱和度(Saturation)、亮度(Lightness),循环改变色相(Hue)的方式。

如此以来我们只需改变一个变量就可以改变颜色(色相)啦。


查看LED元件的API,其提供的指定亮色setRGB([R, G, B])方法中,参数需要是RGB值,所以要做一下HSL到RGB的转换,伪代码如下:function hslToRgb(h, s, l) {
...
// 完整代码:[url=http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c]http://axonflux.com/handy-rgb- ... del-c[/url]
return[r, g, b]
}
 
主体逻辑代码:var timmer; //变色的计时器
var h = 0; //色相初始值,范围[0-1]

//当按钮按下时,我们启动一个定时器,定时改变色相
$('#button').on('push', function() {
timmer = setInterval(function() {
h += 0.01;
if (h > 1) {
h = 0;
};
$('#led').setRGB(hslToRgb(h, 1, 0.5));
}, 100)
});
//当释放按钮时,清除定时器,此时颜色将停留在释放那一刻。
$('#button').on('release', function() {
clearInterval(timmer);
});
 
……好,5分钟过去了,假设代码写完了……

把代码部署到Ruff主板

通过查看官网的网络配置文档让Ruff主板和电脑在同一个局域网。

然后还是在命令行窗口中,在当前项目目录下执行rap deploy -s部署代码并启动。

以后每当给Ruff主板通上电,它即会自动启动并执行刚刚部署的代码了。

附上最终效果:一个按下按钮颜色循环的彩灯,释放按钮颜色则停留。

 
注:作者Bob 查看全部
                                      
简介:前端开发者可以通过Ruff,使用自己熟悉的Javascript脚本语言进行硬件开发,从而将更多的注意力集中在应用逻辑上。
                                                                                                                                                       
Ruff 是什么

官方说法:Ruff 是一个支持 JavaScript 开发应用的物联网操作系统。Ruff 跨平台、可以支持各种硬件,例如树莓派等。


为了便于理解,下文说的 Ruff 都特指其官方的开发套件,如上图,包含一些传感器,如光线感应、按钮、温湿度传感器、红外接受发送模块等。中间最大的那块就是 Ruff 开发套件的主板了。

通过 Ruff 提供的js运行时,前端er可使用熟悉的js代码来控制连接在板上的设备模块,而不用关心底层实现,因为Ruff已经对硬件进行了抽象。

因而可以在几乎没有硬件基础的情况下获取电子元件的数据(比如温湿度)、操作电子元件(比如控制LCD的显示、LED灯),然后用代码把它们的逻辑连接起来,即,使用js来控制物理设备

逻辑部分代码和平时Web端的js代码一样,下面是官方的快速开始的Demo:
// 在 `#button` 按下时点亮 `#led-r`.
$.ready(function(error) {
$('#button').on('push', function() {
$('#led-r').turnOn();
});
});

 
以上就是“按下按钮点亮LED”的逻辑实现的全部代码,是不是非常熟悉的味道。

那么整个开发流程是怎样的?

开发流程在Ruff官网上已有相关详细介绍,这里用自己的理解来简化一下:

1.使用Ruff的SDK在电脑上建立项目目录,告知需要用到的元件
2.使用Ruff的SDK来查看元件的连线,并把元件和Ruff主板连接起来
3.使用你喜欢的文本编辑器,比如sublime text、webstorm来编写逻辑代码
4.通过电脑把项目整个目录部署到Ruff主板上
5.Ruff主板可以脱离电脑啦,以后只要给Ruff主板通电,就会自动执行之前部署上去的代码

 

实操,做个颜色可调的LED

说了这么多,终究有些抽象,下面用10分钟来做一个变色的灯。

效果是:按下按钮灯光颜色循环,释放按钮则灯光停留在释放瞬间的颜色。

所以,需要的元件是按钮、支持3原色的LED灯。先从Ruff的开发套件中翻出来这两个元件:
 



顺便提一下,元件的包装袋上面有它的型号(包装底部的网址的最后黄颜色字体部分),后面会用到,同时那个url就是该元件API的文档地址。

在电脑上新建项目目录

安装完Ruff提供的SDK后,在命令行窗口中执行rap init进行项目创建,非常类似npm的init,填写标题描述作者之类的。


然后使用rap device add #元件自定义id 来为该项目添加元件(按钮和LED),元件的id用途是在逻辑代码中$('#元件id')来选中设备元件,名称可自定义。执行之后,下一步会询问要添加的元件的型号,即之前包装袋上的黄颜色部分。


在类似对话式建立项目之后,项目的结构图如下。经过添加设备,ruff_modules目录下增加了相应的设备元件目录,其中包含了驱动的代码。

项目就算是初始化好了,Ruff会自动计算出连线方式,执行rap layout —visual 弹出可视化的连线说明,按图示连上主板。 

  

上面的准备好了之后,剩下的就是逻辑的代码啦,在项目下src目录中的index.js文件中。

编写逻辑代码

因为我们是做一个变色的灯,根据人眼的自然习惯,使用HSL颜色模型,固定饱和度(Saturation)、亮度(Lightness),循环改变色相(Hue)的方式。

如此以来我们只需改变一个变量就可以改变颜色(色相)啦。


查看LED元件的API,其提供的指定亮色setRGB([R, G, B])方法中,参数需要是RGB值,所以要做一下HSL到RGB的转换,伪代码如下:
function hslToRgb(h, s, l) {
...
// 完整代码:[url=http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c]http://axonflux.com/handy-rgb- ... del-c[/url]
return[r, g, b]
}

 
主体逻辑代码:
var timmer; //变色的计时器
var h = 0; //色相初始值,范围[0-1]

//当按钮按下时,我们启动一个定时器,定时改变色相
$('#button').on('push', function() {
timmer = setInterval(function() {
h += 0.01;
if (h > 1) {
h = 0;
};
$('#led').setRGB(hslToRgb(h, 1, 0.5));
}, 100)
});
//当释放按钮时,清除定时器,此时颜色将停留在释放那一刻。
$('#button').on('release', function() {
clearInterval(timmer);
});

 
……好,5分钟过去了,假设代码写完了……

把代码部署到Ruff主板

通过查看官网的网络配置文档让Ruff主板和电脑在同一个局域网。

然后还是在命令行窗口中,在当前项目目录下执行rap deploy -s部署代码并启动。

以后每当给Ruff主板通上电,它即会自动启动并执行刚刚部署的代码了。

附上最终效果:一个按下按钮颜色循环的彩灯,释放按钮颜色则停留。

 
:作者Bob

移动端强制横屏和强制竖屏解决方案

前端技术分享qiao 发表了文章 • 0 个评论 • 5446 次浏览 • 2016-12-08 17:05 • 来自相关话题

真实需求场景:都是痛点,说多了都是泪  

场景1、产品说有一个H5需求,然后设计丢过来一个横屏的设计稿和一个竖屏的设计稿。——这明明就是两个需求555

场景2、设计给了一个竖屏的设计稿,用户横屏时提示:“请竖屏查看!”。微信手Q体验棒棒哒,产品说这个要在游戏里面推,游戏是横屏的,也就是说所有游戏内用户看到页面第一眼都是:“请竖屏查看!”。亲游戏内用户占比60%以上,那才是上帝,你就是这样对待上帝的吗?

场景3、设计给了一个横屏的设计稿,用户竖屏时提示:“请横屏查看!”。好,横就横谁怕谁,手机横过来后发现还是“请横屏查看!”,原来手机锁定屏幕旋转了,手机解除锁定,再去看页面“请横屏查看!”,想了半天原来微信也锁定屏幕旋转,你牛,你横,我不看了还不行吗?

做为一名切图仔别问我痛不痛?需求虐我千百遍,我待需求如初恋。有得选吗?呵呵

有,不能忍就改变

强制横屏,强制竖屏 你 值得拥有

强制横屏基本原理:






配合实例完整源码阅读更好理解:



简单版的长页面(推荐)




单屏居中布局页面

实现原理的核心代码分解:

1.在横屏下完成重构,实现页面可以缩放大小,设计稿宽度为1334px,html字体大小为100px,

bod设置overflow:auto;用于解决页面滚动问题,用竖屏下的X轴滚动达到强制横屏后的“X”轴的滚动效果。
CSShtml { font-size: 100px; width:100%; height:100%; }
body { font-size: 26px; overflow:auto; width:100%; height:100%; background: #0c0d0d;}
.wrapbox { overflow:hidden;}
wrap {position:absolute;width: 13.34rem; background: #0c0d0d; -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.wrap img {width: 13.34rem; }
Html<div class="wrapbox" id="wrapbox">
<!--视图外框-->
<div class="wrap" id="wrap">
<!--内容块-->
</div>
</div>
Javacscript var $wrapbox = $("#wrapbox"),$wrap = $("#wrap");
function orientationfn() {
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
}
}, 200);
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationfn, false);
orientationfn();
注:javascript部本没有任何依赖,不想用Zepto或JQ的同学可以直接改成原生的哦

 2.在竖屏下实现横屏的设计稿, 内容块宽=h,内容块高=w,页面缩放适应浏览器窗口大小,横屏和竖屏窗口比例是不一样的。$wrap.css({ "width": h });
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });
3.内容旋转-90度,以左上角为基点旋转(长页面必须是逆时针旋转才可以滚动哦)
4.内容块x轴移动 -h px,竖屏下横屏的视觉重构已经完成。当用户从竖屏回到横屏时清除竖屏的代码function orientationfn() {
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
$wrap.css({ "width": "100%", "webkitTransform": "rotate(0deg)", "transform": "rotate(0deg)" });
$wrapbox.css({ "width": "auto", "height": "auto" });
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
$wrap.css({ "width": h, "webkitTransform": "rotate(-90deg) translate(-" + h + "px,0)", "transform": "rotate(-90deg) translate(-" + h + "px,0)" });
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });
}
}, 200);
}
长页面强制横屏基本原理讲解完成。

强制横屏的各种坑:

1.局部滚动,滚动方向相反
滚动元素的父级元素加-webkit-overflow-scrolling: touch;属性

2.固定定位(position:fixed;)的元素错位
用绝对定位(position:absolute;)实现固定定位的效果,对wrapbox元素定位

3.划屏事件x、y轴数据相反
需要划屏操作的元素放到wrapbox元素的子级,或者直接把划屏事件写到wrapbox元素上,这样元素没有被旋转也就不存在这个BUG,再考虑用iScroll.js

4.竖屏后某些定位的元素z_index层级过底不可见,因为内容块的transform属性z_index过高造成
为元素添加-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);属性


强制竖屏和强制横屏原理一样,只是做法上只是方向不同,大家可以举一反三,如有疑问请留言。

查看全部
真实需求场景:都是痛点,说多了都是泪  

场景1、产品说有一个H5需求,然后设计丢过来一个横屏的设计稿和一个竖屏的设计稿。——这明明就是两个需求555

场景2、设计给了一个竖屏的设计稿,用户横屏时提示:“请竖屏查看!”。微信手Q体验棒棒哒,产品说这个要在游戏里面推,游戏是横屏的,也就是说所有游戏内用户看到页面第一眼都是:“请竖屏查看!”。亲游戏内用户占比60%以上,那才是上帝,你就是这样对待上帝的吗?

场景3、设计给了一个横屏的设计稿,用户竖屏时提示:“请横屏查看!”。好,横就横谁怕谁,手机横过来后发现还是“请横屏查看!”,原来手机锁定屏幕旋转了,手机解除锁定,再去看页面“请横屏查看!”,想了半天原来微信也锁定屏幕旋转,你牛,你横,我不看了还不行吗?

做为一名切图仔别问我痛不痛?需求虐我千百遍,我待需求如初恋。有得选吗?呵呵

有,不能忍就改变

强制横屏,强制竖屏 你 值得拥有

强制横屏基本原理:

1.png


配合实例完整源码阅读更好理解:
2.png
简单版的长页面(推荐)

3.png
单屏居中布局页面

实现原理的核心代码分解:

1.在横屏下完成重构,实现页面可以缩放大小,设计稿宽度为1334px,html字体大小为100px,

bod设置overflow:auto;用于解决页面滚动问题,用竖屏下的X轴滚动达到强制横屏后的“X”轴的滚动效果。
CSS
html { font-size: 100px; width:100%; height:100%; } 
body { font-size: 26px; overflow:auto; width:100%; height:100%; background: #0c0d0d;}
.wrapbox { overflow:hidden;}
wrap {position:absolute;width: 13.34rem; background: #0c0d0d; -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.wrap img {width: 13.34rem; }

Html
<div class="wrapbox" id="wrapbox"> 
<!--视图外框-->
<div class="wrap" id="wrap">
<!--内容块-->
</div>
</div>

Javacscript 
var $wrapbox = $("#wrapbox"),$wrap = $("#wrap"); 
function orientationfn() {
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
}
}, 200);
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationfn, false);
orientationfn();

注:javascript部本没有任何依赖,不想用Zepto或JQ的同学可以直接改成原生的哦

 2.在竖屏下实现横屏的设计稿, 内容块宽=h,内容块高=w,页面缩放适应浏览器窗口大小,横屏和竖屏窗口比例是不一样的。
$wrap.css({ "width": h }); 
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });

3.内容旋转-90度,以左上角为基点旋转(长页面必须是逆时针旋转才可以滚动哦)
4.内容块x轴移动 -h px,竖屏下横屏的视觉重构已经完成。当用户从竖屏回到横屏时清除竖屏的代码
function orientationfn() { 
setTimeout(function () {
var html = document.documentElement;
var w = html.clientWidth, h = html.clientHeight;
if (h < w) {
//横屏
html.style.fontSize = w / 1334 * 100 + "px";
$wrap.css({ "width": "100%", "webkitTransform": "rotate(0deg)", "transform": "rotate(0deg)" });
$wrapbox.css({ "width": "auto", "height": "auto" });
} else {
//竖屏
html.style.fontSize = h / 1334 * 100 + "px";
$wrap.css({ "width": h, "webkitTransform": "rotate(-90deg) translate(-" + h + "px,0)", "transform": "rotate(-90deg) translate(-" + h + "px,0)" });
$wrapbox.css({ "width": h, "height": ($wrap.height() - 160) });
}
}, 200);
}

长页面强制横屏基本原理讲解完成。

强制横屏的各种坑:

1.局部滚动,滚动方向相反
滚动元素的父级元素加-webkit-overflow-scrolling: touch;属性

2.固定定位(position:fixed;)的元素错位
用绝对定位(position:absolute;)实现固定定位的效果,对wrapbox元素定位

3.划屏事件x、y轴数据相反
需要划屏操作的元素放到wrapbox元素的子级,或者直接把划屏事件写到wrapbox元素上,这样元素没有被旋转也就不存在这个BUG,再考虑用iScroll.js

4.竖屏后某些定位的元素z_index层级过底不可见,因为内容块的transform属性z_index过高造成
为元素添加-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);属性


强制竖屏和强制横屏原理一样,只是做法上只是方向不同,大家可以举一反三,如有疑问请留言。

document.getElementById('tgask')

默认分类Delete 发表了文章 • 0 个评论 • 107 次浏览 • 2016-11-25 18:34 • 来自相关话题

刷个脸。以后多多关照
刷个脸。以后多多关照
9f510fb30f2442a71efed3bfd743ad4bd1130233.jpg