我正在尝试使用Chrome的开发者工具在网站上编辑javascript.我已经阅读了大约30个关于如何执行此操作的帐户以及观看了一些视频.事实上,当我进入"源"选项卡并打开我要编辑的文件时,我无法对其进行任何操作.我缺少一些步骤吗？

我可以创建断点,一步一步......等我无法编辑.最近是否删除了此功能？

我正在使用Font-Awesome,但是在未加载字体文件时,图标显示为.

所以,我希望这些图标display:none不会加载文件.

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

我怎么知道这些文件已经加载,我终于能够显示图标了？

编辑: 我没有在页面加载(onload)时说话,因为字体可以在整个页面之前加载.

我正在寻找一个可靠的媒体查询规则:

If desktop width < 720px AND devices in portrait mode {}

(也就是说,当桌面上的宽度减小时,媒体查询会以720px开始.在手机上,这应该只在纵向模式下才会发生 - 横向不应该应用媒体查询)

问题是:如何将设备与桌面分开定位.

存在问题是因为:@media handheld不受支持

另外max-width影响一切,所以它不能与之结合使用max-device-width AND portrait

好像我只能针对:

1. 所有设备在设定宽度之间/之间
2. 只有设备(使用JavaScript填充程序修复媒体查询)低于/设置宽度和方向之间.

无法单独处理设备和台式机.

是否有现成的JavaScript解决方案可以满足我的需求？

注意我正在编写我的CSS,LESS,媒体查询嵌套在其中.

背景

我正在处理的网站是响应式的,并使用网格系统.在720px宽度(当前测试宽度)下,列使用会针对较小的设备/分辨率进行更改.经测试,不过,该网站(在720像素宽度的整个网站)是景观惊喜可读性,甚至在我的小屏幕的HTC Desire.当我删除部分网站以便通过媒体查询获得更好的可用性时,我想为什么不能在横向上正常访问该网站.

没有修改元素列跨度的桌面上的波纹720px看到一个非常破碎的网站.但是,由于移动设备的性质较小,因此不会出现这种情况.然而,对于列跨度修改,当涉及到手机上的风景时(由于浏览器的高度大大降低),特定元素仅仅是不成比例的(例如标题).

简而言之,完全根据浏览器宽度更改设计并不能平等地传播所有设备,因为我已经设法在其他网站上实现.

我使用以下元标记:

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

已经尝试过什么

方向与桌面无关.它会根据用户窗口设置,分辨率等而改变.

我尝试过以下目标来定位手机/两者:

@media handheld and (orientation:portrait) { }

似乎没有手机利用这个handheld属性,至少100%没有 - 所以它毫无价值.

@media screen and (max-device-width:720px) and (orientation:portrait)  { }

会工作得很好,但Android 2.2和2.3(可能是其他人,更不用说其他操作系统？)有问题max-device-width不工作.

@media screen and (max-width:720px) and (orientation:portrait)  { } …

我希望发生以下事情:

1. 让流程自动化服务器端.

2. 只需能够像我在代码中的CSS文件一样引用LESS文件.

3. 用户返回缩小的CSS而不是LESS文件 - 缓存,因此除非LESS文件已更新,否则编译器不需要运行.

4. 为此,可以使用在我的域中任何位置引用的任何 LESS文件.

我发现Lessphp,但文档不是很清楚,也没有解释如何动态获取任何LESS文件.我想我会发布我是如何完成所有工作的,因为我还没有看到如何通过PHP实现这一点.

我想知道这两种创建控制器的方法的用例是什么:

使用ngController:

myApp.controller('myController', ['$scope', function ( $scope ) {

}]);

使用controller属性在指令内构造控制器:

myApp.directive ( 'myDirective', [ '$window', function( $window ) {
    return {
        restrict: 'A',
        controller: [ '$scope', function( $scope ) {

        }],
        link: function( scope, element, attrs ) {

        }
    };
}]);

如果在同一个元素上调用控制器,你有没有理由不在指令中构造控制器？

这只是控制器的广泛使用/复杂程度的问题吗？

我正在为Angular开发基于UI和排版的指令.在这种情况下,指令所应用的元素是未知的 - 从div,span,h1到h5.

使用模板的原因是我可以添加ng-*指令(因此开发人员不需要记住除指令名称之外的任何内容).

我添加属性和重新编译元素的成功有限.ng-transclude然而,在添加时却没有成功.创建一个新元素并替换旧元素会带来集成问题(忽略元素上可能存在的其他指令和数据属性),复制这些属性并将它们添加到新元素几乎没有成功.

这看起来应该非常简单,因为template它本身可以将元素更改为您指定的任何内容(使用transclude和replace),肯定有'漫长的做法'？

太糟糕了,你不能做到以下几点:

module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        controller: function( $scope, $element ) {
            $scope.tag = $element[0].nodeName;
        }
        template: "<{{tag}} data-ng-transclude ng-*=''></{{tag}}>",
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

我认为主要问题是我希望用模板替换和转换元素,而不是将模板(或编译元素)作为子项添加.

我已经ng-*在我的代码中替换了对vanilla JS 的需求和模板,例如:

<div data-ng-style="{'font-size':fontSize}></div>

同

element[0].style.fontSize = scope.fontSize;

这引出了使用许多ng-*指令的好处的问题？它只是'Angular方式'吗？

我花了几个晚上调查用现代浏览器实现@ font-face的最佳方法.我是一名全职的网络/系统开发人员,具有作为平面设计师的背景,我发现网页设计的机会和可能性变得越来越有趣.所以,我做了一些测试,并想听听是否有人有任何建议,任何更好的想法或输入.我的测试场景看起来像这样.

我用ALOT测试了不同的在线工具和应用程序,但最后我把它归结为一个在线服务和一个应用程序.

• FontSquirrel,在线工具 - 免费.http://www.fontsquirrel.com/fontface/generator
• FontXChange,mac/win应用程序 - 99 $.http://fontgear.net/fontxchange.html

我使用了我的Mac,Tamil Sangam MN和Tamil Sangam MN Bold附带的字体,两者都是开放型,.otf.

• TamilSangamMN.otf - 290 KB
• TamilSangamMNBold.otf - 271 KB

调查转换大小

FontSquirrel

这是一个很好的在线工具,非常好.有几种不同的模式,我使用了Basic和Optimal.我的.otf文件的输出是svg,ttf,eot和woff.

基本

定期

• TamilSangamMN.svg 233 KB
• TamilSangamMN.ttf 71 KB
• TamilSangamMN.eot 25 KB
• TamilSangamMN.woff 30 KB
• 总计:359 KB

胆大

• TamilSangamMNbold.svg 225 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 25 KB
• TamilSangamMNbold.woff 30 KB
• 总计:349 KB

最佳

我注意到最佳字体的第一件事是它们比基本变体小得多~260 KB!

定期

• TamilSangamMN.svg 33 KB
• TamilSangamMN.ttf 25 KB
• TamilSangamMN.eot 15 KB
• TamilSangamMN.woff 17 KB
• 总计:90 KB

胆大

• TamilSangamMNbold.svg …

为什么在IE8中呈现此字体:

@font-face {
  font-family: 'Aller';
  src: url('aller_rg-webfont.eot');
  src: url('aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
       url('aller_rg-webfont.woff') format('woff'),
       url('aller_rg-webfont.ttf') format('truetype'),
       url('aller_rg-webfont.svg#AllerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

而这不是:

@font-face {
  font-family: 'Champagne';
  src: url('champreg-webfont.eot');
  src: url('champreg-webfont.eot?#iefix') format('embedded-opentype'),
       url('champreg-webfont.woff') format('woff'),
       url('champreg-webfont.ttf') format('truetype'),
       url('champreg-webfont.svg#Champagne&LimousinesRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

我真的无法弄明白.显然,所有其他浏览器工作正常.

如果您有兴趣为解决方案做出贡献,我会有一个回购并运行.

我在构建移动网站时遇到了一个有趣的问题.

我设置'溢出:隐藏;' 切换抽屉时的html/body.这是为了让窗口不能滚动,并且抽屉-这是滚动的-在达到它的极限不滚动的页面(e.preventDefault();&e.stopPropagation();根本就没有做的伎俩).

一切都很好.很棒,如果这是一个Phonegap应用程序.但是 - 由于这是一个网站,不一致的溢出设置会在浏览器的"全屏模式"下产生可用性问题."全屏模式"是指在向下滚动页面时隐藏地址栏.向上滚动时,栏会重新出现.切换抽屉时,浏览器基本上处于"非全屏模式"或"全屏模式".后者是真正的问题 - 因为用户根本无法访问地址栏 - 并给人留下浏览器锁定或者奇怪的印象.

关于如何(可能使用Javascript)滚动/ touchmove的任何明智的想法仍然可以提供进入/退出'全屏模式'的效果？我玩过全屏API,但这是正确的全屏,而不仅仅是地址栏.

这里有一些截图:

1. 网站加载,我们可以看到地址栏

2. 网站可按预期滚动,浏览器进入"全屏模式"

3. 我们切换抽屉打开 - 网站现在没有响应(除了抽屉滚动和任何手势[通过AngularJS指令]我必须隐藏抽屉)

4. 当地址栏可见时,抽屉切换.对于可用性有好处,但是在使用站点时预期的"全屏模式"不会发生(拥有房地产会很好).

EDIT2:https://medium.com似乎实现了我的目标.

EDIT3:一个看不见的绝对定位div在一切事物上取得了一些成功 - 但这有它自己的问题.

这可能是一个很长的镜头,但我正在寻找与Tealium UDO(通用数据对象)合作的人.我有一个带有Google Search Appliance的搜索页面,我utag_data在数据层中的对象如下所示:

var utag_data = {
   "country":"US",
   "language":"EN",
   "search_keywords": "blahblah",
   "search_results": "0"
}

这里的问题是search_results属性没有足够的时间等待实际结果数加载所以它是默认0而不是实数1200.我已阅读Tealium的文档utag.view(),utag.link()并希望使用其中一个更新search_results标记.我试过了:

utag.link({'search_results':'1200'}); 

和

utag.view(utag_data,null,[12]); 

其中12是Tealium中标签的UID,但是当在firefox中使用Omnibug时,我没有看到任何更新的值,但是它将点击事件发送到AT Internet.

有人对这个有经验么？先感谢您

我一直在为Angularjs开发一个scrollspy模块.我遇到的问题是,如果页面处理动态内容,则滚动数据(元素位置)很快就会过时.处理这类问题的angularjs方法是什么？

任何执行DOM操作$broadcast的指令是否应该是scrolllspy模块寻找的事件 - 允许它重构其位置数据？

如果scrollspy模块每隔x秒检查一次scrollHeight的变化$timeout吗？

甚至更好,有没有绑定,并观察DOM属性值变化的方式(属性,如offsetTop,offsetHeight,scrollHeight,没有数据属性)？

更新:为GitHub添加了代码库

我非常肯定在花了一夜之后试图找到一个不可能的答案,我已经开发了一个解决方案 - 但是,如果有人知道更好的方法,我很乐意听到它...

我在代码上经历了很多次迭代,以下只是一个思路.我相信,在某些时候,我正在使用全局标志,以便match()工作,我不记得现在是否有必要.

var str = "@abc@def@ghi&jkl";
var regex = /^(?:@([a-z]+))?(?:&([a-z]+))?$/;

这里的想法,在此简化的代码,是可选的组1,其中有一个未指定的量,将匹配@abc,@def和@ghi.它只会捕获将有一个或多个字母字符.第2组是相同的,除了&符号上的匹配.它也应该锚定到字符串的开头和结尾.

我希望能够引用两个组的所有匹配,即:

result = str.match(regex);
alert(result[1]); //abc,def,ghi
alert(result[1][0]); //abc
alert(result[1][1]); //def
alert(result[1][2]); //ghi
alert(result[2]); //jkl

我的伙伴说这在.net中对他来说很好用,不幸的是我根本无法让它工作 - 只有在后面引用中返回任何组的最后匹配,如下所示:

(此外,任意一组可选都会造成混乱,设置全局标志也是如此)

var str = "@abc@def@ghi&jkl";
var regex = /(?:@([a-z]+))(?:&([a-z]+))/;

var result = str.match(regex);

alert(result[1]); //ghi
alert(result[1][0]); //g
alert(result[2]); //jkl

以下是我到达的解决方案,捕获有问题的整个部分,并自己创建阵列:

var str = "@abc@def@ghi&jkl";
var regex = /^([@a-z]+)?(?:&([a-z]+))?$/;

var result = regex.exec(str);

alert(result[1]); //@abc@def@ghi
alert(result[2]); //jkl

var result1 = result[1].toString();
result[1] = result1.split('@')

alert(result[1][1]); //abc
alert(result[1][2]); //def
alert(result[1][3]); //ghi
alert(result[2]); …

有没有办法在"添加新帖子"页面的自定义字段下拉列表中添加自定义字段键而不添加字段？