您现在的位置是： 首页 > 游戏问答 游戏问答
原神Pc端错误码31—4302,原神pc端ie9
tamoadmin 2024-05-14 人已围观
简介各位对于iscroll.js用时有没有遇到过问题UC浏览器的PC端如何自由调整外框的大小?即宽度方向应出现滚动条。2015 年网页设计的流行趋势是什么？1. 一些网站为什么只兼容 WebKit 内核浏览器，欧朋HD等其他内核浏览器无法正常访问？大型网站集中了优秀的技术人才，做到跨浏览器兼容肯定不在话下。纵观国内移动端主流浏览器：UC浏览器、QQ手机浏览器、iPhone,iPad内置浏览器等等， 一
1. 一些网站为什么只兼容 WebKit 内核浏览器，欧朋HD等其他内核浏览器无法正常访问？
大型网站集中了优秀的技术人才，做到跨浏览器兼容肯定不在话下。纵观国内移动端主流浏览器：UC浏览器、QQ手机浏览器、iPhone,iPad内置浏览器等等， 一大批基于 WebKit 内核 ，只有排在前3以内的 Opera欧朋浏览器用了 Presto 内核，这或许是原因之一。
2. 其它内核没有 WebKit 兼容性好，没有它先进？
Opera 的欧朋HD 拥有优秀的 Presto 内核，优异的标准兼容性。一些 Opera 的大牛也是 Web标准的制定者 ，所以 Opera 会 率先支持最新特性 ，比如Flexbox 布局，@supports 等。
3. 欧朋HD或其它内核的浏览器只能自己做兼容优化或悲催地访问简版？
在PC端我们会兼容主流浏览器，在移动端同样有此需求， 跨浏览器兼容性正是前端开发工程师的伟大职责和挑战所在 。
浏览器做兼容存在一些弊端：不好检测网站改版，浏览器的适配可能跟网站的适配产生冲突，有时还需读懂网站的代码逻辑。
移动终端愈发便宜愈发高端，高端的设备打开一个很简陋的网页，简单的图文配上简单的交互，完全没发挥出设备的优势。
4. 跨浏览器兼容性为什么重要，为什么要兼容欧朋HD？
兼容性这个话题非常老了，google一下会有成千上万的帖子。简单而言，我们的网站如果只能在某一浏览器上正常访问，则略显不专业。资讯、社交、应用类网站会因此减少用户 ，电子商务类网站会因此 减少收入 。
欧朋浏览器 已经成为国内移动端主流的浏览器之一，且 欧朋HD 对 HTML5 的支持很不错。 有的网站在我们的浏览器兼容性不好，真相是它可能并不兼容我们，我们成了替罪羊 。
还有一点，喜欢欧朋浏览器的用户，期望访问您的网站，体验您的产品，有理由拒绝吗？
============低调的分割线============
书归正传，当前移动互联网的兼容性不是很好，尤其是一些触屏版，仿佛兼容 WebKit 就万事大吉了，仿佛又回到PC端只兼容IE的年代:-(。
欧朋浏览器对应 Opera Mini，欧朋HD对应 Opera Mobile。欧朋浏览器是服务器中转压缩的，突出的是快和省，对HTML5支持不全面；欧朋HD是全功能浏览器，对HTML5支持全面。
做到跨浏览器兼容很难吗？兼容欧朋浏览器和欧朋HD很难嘛？下面跟大家一起探讨。
一、探测浏览器
探测浏览器一般有两种方式：检查 user-agent 字符串和特性检测
检查 user-agent 字符串
欧朋浏览器的 user-agent 像以下格式：
"Opera/9.80 (Android; Opera Mini/7.31996/26.1473; U; zh) Presto/2.8.119 Version/10.54"
"Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/OupengHD-1.3/ADR-1211021236; U; zh-cn) Presto/2.10.254 Version/12.00"
Surface IE10 user-agent 字符串：
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)"
user-agent 一般包含浏览器和平台信息，可以通过正则表达式加以判断。
var isOpera = function(){
var ua = navigator.userAgent;
return {
hd : function(){
return /Opera Mobi/.test(ua);
},
mini : function(){
return /Opera Mini/.test(ua);
}
}
}();
window.onload = function(){
alert(isOpera.hd());
}
特性检测
比较推荐的做法是特性检测：Opera 的浏览器都有 window.opera 对象，欧朋浏览器和 Opera Mini 还有 window.operamini 对象。
var isOpera = Object.prototype.toString.call(window.opera) === "[object Opera]";
var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]";
如果想节省开发时间，知名的 Modernizr 可以协助你完成 HTML5、CSS3 特性检测。
二、使用标准模式
移动端使用 HTML5 doctype 即可，标准模式也兼容没特殊指定 “ Transitional” 的 HTML4.0+ 和 XHTML 1.0+ doctype 。
<!DOCTYPE html>
三、更新 CSS 和 DOM API
1. 更新CSS
CSS3 新特性在草案阶段都会增加浏览器厂商前缀，一旦正式的标准推出，都会建议浏览器厂商去掉前缀。WebKit 优化的页面通常只加了” -webkit- “前缀，连无前缀版本都没有，很影响兼容性。
一个跨浏览器兼容的 CSS3 特性通常这么写，添加主流浏览器前缀和无前缀版本：
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
有些较常用的 CSS3 特性 Opera 和其它内核浏览器已支持无前缀特性，例如：border-radius ， box-shadow ， background-size ，WebKit 优化的页面如果多加一句无前缀特性，即可多兼容一些浏览器。
.box_bgsize {
-webkit-background-size: cover; /* Safari 3-4 */
background-size: cover; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */
}
常用的CSS3 特性对应的 Opera 版本
WebKit 版本
Opera 版本
标准版本
-webkit-border-radius border-radius border-radius
-webkit-box-shadow box-shadow box-shadow
-webkit-background-size background-size background-size
-webkit-background-clip background-clip background-clip
-webkit-transform -o-transform transform
-webkit-transition -o-transition transition
-webkit-animation -o-animation animation
@-webkit-keyframes @-o-keyframes @keyframes
-webkit-box flex flex
@-o-viewport @viewport
各位对于iscroll.js用时有没有遇到过问题
链接: https://pan.baidu.com/s/1aFZXOgUAh9F8uW8IE914tQ
提取码：pdmb游戏名称：《永恒空间》官方简体中文免安装版
端：pc端
类型：射击游戏
语言：简中
大小：3.53GB
标签：科幻,太空,Roguelike
UC浏览器的PC端如何自由调整外框的大小?即宽度方向应出现滚动条。
iscroll是什么？
iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。
官方网站：iscroll4
iscroll的用武之地
1.区域滚动
我们在pc端web开发中，有时会用固定某一区域的宽度和高度，然后使用overflow:auto，使其内容在该区域内滚动。
iphone默认浏览器（mobile safari）也支持固定区域的滚动，但必须双指滑动操作，而且没有滚动条。mobile safari中的单指滑动只针对页面级别，不针对页面元素。这样的操作体验很麻烦，而且很多用户根本不知道双指能够区域滑动。
android自带浏览器也支持区域滚动，且可以单指滑动操作，但是滑动起来卡的半死半活，很不流畅。
使用iscroll,可以完美解决上述问题了，不仅可以在iphone和android上单指滑动，而且滑动起来流畅之极，酣畅淋漓。滑动过程中也有漂亮的滚动条提示，让你舒心不已。
2.固定定位
固定定位不是iscroll的原生用法，而是使用iscroll协助解决固定定位问题。
话说iphone很先进，但就是不支持position:fixed。这下苦了我们了，固定定位怎么解决啊，我们会经常遇到固定标题栏、固定工具栏等情况啊！！
使用iscroll协助解决：首先获取浏览器窗口高度；然后获取固定工具栏的高度；接着将除固定工具栏之外的内容全部放在一个固定区域内，该固定区域的高度=窗口高度-工具栏高度；之后对固定区域使用iscroll。这样，整个html页面的高度正好等于窗口高度，页面级别不会出现滚动，工具栏就一直固定在当前的位置。在固定区域内滑动，可以查看页面其他内容，不会影响工具栏的定位。
鼠标滚轮滚动
iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度
iscroll将每次的滚轮距离缩小为系统默认距离的12分之一，难怪滚起来很慢，感觉不灵敏。只需要将12改成1，滚轮的滚动速度就恢复正常了。你也可以根据实际需要设置成其他值。
输入框聚焦不灵敏、无法选择文字
使用了iscroll之后，你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为，详见源代码92行：
onBeforeScrollStart: function (e) { e.preventDefault(); },
iscroll不分青红皂白，禁止了浏览器的一切默认行为，导致上述问题。所以我们需要稍作修改：
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
},
判断触发事件的元素是不是input、select、textarea等表单输入类元素，如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。
2015 年网页设计的流行趋势是什么？
您好，很高兴为您服务！
PC版UC浏览器的窗口调节问题为已知问题，并不能调节成很小的状态；
但是可以关闭“搜索栏”和“插件栏”（在顶部按鼠标右键可以调出），这样就可以调节的更小一点。
如果仍有问题，请您继续向我们反馈，我们会第一时间为您跟进。
2015年网页设计四大趋势 扁平化/HTLM5席卷而过！
网页设计趋势变化的是如此之快，以至于我们甚至还没来得及全部体会，有的便已过时。所以，预测某个设计趋势会流行多久压根就是个伪命题。在21世纪初的时候，Flash曾被视为最热门的网页设计工具；而在几年前，富有光泽的按钮也是网页上必不可少的组件，可是现在，他们都已经被扁平化设计和HTLM5所席卷而过。
不要被炫酷时尚光鲜亮丽的时尚风格洗脑，许多刚刚出现或者才开始的流行的设计风尚都会是昙花一现。那些能对设计文化产生持续影响的设计趋势之所以存在，是因为它们在根本上有助于用户体验，或者服务于某些功能或者技术。但是今天这篇文字不是要做这些事情。今天所说的四个设计趋势是经过仔细推敲的，它们应该会在接下来的2015年里继续流行，甚至会强势地在2016年里继续做一个坚挺时尚的设计趋势。看下去，你会明白，它们不是在炫技或者耍猴，它们的确正在重新定义网页设计。
1、更少的页面
是否有人曾戳着你的屏幕说“少即是多？”越来越多的网站开始精简网站上页面的数量，使用单页设计的网站已经不在少数，即是相对传统的网站也过度到了简化后的多页式页面架构。促成这一趋势的原因来自两个方面：第一，用户喜欢简单，越简单用户越容易找到它们想要的内容，这自然也对网站越好；第二，据统计，移动端的流量占据了网站流量来源的4成，对于移动端越友好，自然也越有利于网站和网站的业务。如果你能在餐厅的移动端网页上订餐，何必费劲巴拉地找电脑来下单呢？成交额难道不会妥妥地上升么？下面这个高大上的单页网站属于伦敦的Jacks Bar，这是一家酒吧餐厅二合一的餐饮机构，在移动端浏览成为用户首选的今天，滚动比点击更加有用。
而这家名为三重樱咖啡的站点则是另一个实例，典型的单页设计，没有杂乱的信息，它只有两个导航链接，并且两者都在页面的相同区域。
2、无外乎是响应式设计
响应式网页自然可以适配各种各样的设备的屏幕，但是它们同时也是相对比较“庞大”网站，加载速度不会快到哪里去。在过去，许多品牌会为用户单独设计桌面端页面和移动端的页面，但是随着市面上设备的屏幕尺寸膨胀分裂，响应式网站设计就成了一个更为有效也高效的解决方案了。在搜索引擎抓取数据的时候，单个URL会更容易受到它们的青睐。从这个角度上来看，设计师有必要考虑一下手头项目是否做到了响应式设计。
Skinny Ties 就是一个响应灵敏的响应式网页，在任何屏幕上都能良好地显示，从到内容，这个网站都经得起最挑剔的客户的考验。
3、个性化的用户体验
网页Cookie并不是啥新鲜的东西，它们已经为网页和用户服役多年。现在，设计师们开是借助它们让网页的弹出窗口呈现出更加精准的内容了：更加个性化的广告，更加符合用户习惯的用户体验设计。做电商的朋友可能会非常需要这样的设计。
举个例子，假设你拥有一个销售促销礼品的电商网站，你的某个用户是一家公司的经理，或者是一个小企业主，它正在为自己的客户和员工寻找类似的商品。这并不是他第一次访问你的网站了，那么你可以借助个性化的体验设计，为他推荐它可能需要的商品，让他成为回头客。
在欧美市场，你恐怕找不到比亚马逊更好的例子，当然，生活在大陆的我们，可能已经被无所不能的淘宝的推荐系统所折服。
4、高清大图
讲故事其实也是设计的基本功。使用可靠的内容和漂亮的将用户从A点引导到B点，已经被证明有利于网站的转化率。使用大幅和富有质感的文字能够赋予整个页面以生命力，让它更加有趣，令用户愿意与之进行互动。随着高分辨率设备的普及，这些拥有高清大图的网页会轻松讨好用户的双眼。
温馨/动人/真实的故事配合着高清大图元素，用户会买账。不论是用作背景还是配图，整个页面的基调都会因此而改变。 就是这样的一个案例。
作品展示网站这样做其实很不错，电商和零售类的网站则需要斟酌一下如何展示才不会太过突兀。使用大图的诀窍在于的选择，抓人眼球的视角和富有质感的细节会让人驻足。配合着有趣的故事，用户就会留下。
