我正在构建一个自适应/响应式网站.
关于最近对HTML5BP的更改:
" 移动/ iOS css修订版 "
我开始使用:
<meta name="viewport" content="width=device-width">
...我在我的CSS中有这个:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
当initial-scale=1被包括在内,从垂直旋转到水平(在iPad/iPhone)引起的布局从2列(例如)更改为3列(由于美达查询,initial-scale=1和JS修复为视口比例错误).
总而言之,在横向模式下,这会缩放页面:
<meta name="viewport" content="width=device-width">
......而这不是:
<meta name="viewport" content="width=device-width, initial-scale=1">
注意:在iPad/iPhone上查看HTML5BP网站时,您可以看到此缩放效果.
我的问题:
@robertc:谢谢!这非常有帮助.
其实我喜欢不具有initial-scale=1; 我的同事习惯于看到布局变化而不是缩放.我敢肯定,我将被迫增加initial-scale=1只是为了取悦所有人(因为没有放大,看到布局的变化,是他们已经习惯了看到的).
我刚刚注意到github上的HTML5BP index.html和网站正在使用<meta name="viewport" content="width=device-width">; 对我来说,这是放弃的理由initial-scale=1,但当我试图向"非极客" 解释这些事情时,我会引起一阵兴奋.:d
我正在使用以下代码绑定"click"或"touchstart"事件(使用jQuery on(eventType, function() { ... })).
var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';
稍后的:
$foo.on(what, function() { ... });
...这对iPad和"其他一切"都很有用,但我担心上面的代码有"iPad隧道视觉"......
我的问题:
是否所有其他设备(例如Android平板电脑)都具有类似名称的"touchstart"事件？如果是这样,我如何改进上面的代码,以便我可以考虑这些事件类型？
换句话说,我如何在上述代码(不仅仅是iPad)中考虑更广泛的触控设备？
你们有什么想法:
var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');
注意:上述大部分逻辑来自Modernizr.
以上似乎适用于Firefox/iPad ......此时我没有太多可以测试的内容.
我喜欢上面的内容是我不是UA嗅闻.:)
tap所有其他触摸设备都是一个很好的默认设置？
这不是一个直接的答案,但是在面对多个平台和设备的点击相关事件时,提供了很多关于开发人员面临的情况的细节.
Android和iPhone触控事件
Android和iPhone版本的WebKit有一些共同的触摸事件:
Run Code Online (Sandbox Code Playgroud)touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown touchmove …
当您编写复杂的jQuery/javascript时,如何在this不重新定义this先前定义的变量的情况下管理使用？您是否有经验法则或个人偏好来命名this变量(随着嵌套变深)？
有时我希望更高范围的变量可用于嵌套函数/回调,但有时候我想要一个干净的平板/范围; 是否有一种很好的方法来调用函数/回调而不必担心变量冲突？如果是这样,你使用什么技术？
一些超级愚蠢的测试代码:
$(document).ready(function() {
console.warn('start');
var $this = $(this),
$dog = $('#dog'),
billy = function() {
console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);
var $this = $(this);
console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);
};
// (#1)
billy(); // BILLY! THIS: undefined | DOG: jQuery(p#dog)
// BILLY! THIS: jQuery(Window /demos/this/) | DOG: jQuery(p#dog)
console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: jQuery(Document /demos/this/) | DOG: jQuery(p#dog)
// (#2)
billy(); …首先,一个伪代码示例:
;(function(foo){
foo.init = function(baz) { ... }
foo.other = function() { ... }
return foo;
}(window.FOO = window.FOO || {}));
这样称呼:
FOO.init();
window.FOO = window.FOO || {}？我理解代码的作用...请参阅下面的我的原因.
我这样称呼全球传递:
;(function(foo){
... foo vs. FOO, anyone else potentially confused? ...
}(window.FOO = window.FOO || {}));
...但我只是不喜欢称小写" foo",考虑到全局被称为大写FOO......它只是看起来令人困惑.
如果我知道这种技术的技术名称,我可以说:
;(function(technicalname){
... do something with technicalname, not to be confused with FOO ...
}(window.FOO = window.FOO || {}));
我见过一个最近(很棒)的例子,他们称之为" exports":
;(function(exports){
...
}(window.Lib = …