小编Geo*_*nos的帖子

Safari iOS不支持使用srcset/sizes的响应式图像

我有以下内容

        <img
            src="/img/footer/logo_white.png?v=2.0"
            srcset="/img/footer/logo_white.png?v=2.0 1x,
                    /img/footer/logo_white2x.png?v=2.0 2x"
        >
Run Code Online (Sandbox Code Playgroud)

这在普通和hiDPI屏幕上工作正常.

但是当视口非常小(低于400px)时,徽标不适合,因此我需要在实际长度方面使用较小版本的图像,这是我创建的.然后我试了一下

            <img
                class="biw-logo"
                sizes="(max-width: 390px) 110px, 175px"
                src="/img/footer/biw_logo.png?v=2.0"
                srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
                        /img/footer/biw_logo.png?v=2.0 175w,
                        /img/footer/biw_logo2x.png?v=2.0 350w"
            >
Run Code Online (Sandbox Code Playgroud)

这适用于显示低于390像素的视口的_small图像 - 但现在我已经失去了"高分辨率"因素; 我不能强迫iphone5s中的iOS浏览器使用上述语法显示长度为110px的220px图像.

你能纠正我的语法吗?

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">
Run Code Online (Sandbox Code Playgroud)

html css srcset responsive-images

3
推荐指数
1
解决办法
4093
查看次数

测试 Mongo 的数据生成器?

我正在尝试生成 json 数据(种子数据),以便能够测试用 Express/MongoDb 编写的新应用程序。我尝试了一些在线解决方案,例如: http: //json-generator.com/,但我想知道是否有一个 npm 包?

mongodb node.js express

3
推荐指数
1
解决办法
5332
查看次数

DOM脚本getElementsByClassName(用于链接)

我正在练习DOM Scripting(没有现实生活中的问题,而是实践和理论,我知道如何用jQuery实现这一点)所以,我正在努力改进和理解以下内容:

我有一些类的链接,我附加事件:

<a href="http://www.google.com" class="popup">click</a>
<a href="http://www.test.com" class="popup">click2</a>
<a href="http://www.abc.com" class="popup">click3</a>
<a href="http://www.google.com" class="no">click4</a>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

window.onload = prepareLinks;

function prepareLinks() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        if (links[i].getAttribute("class") == "popup") {
            links[i].onclick = function () {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}


function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}
Run Code Online (Sandbox Code Playgroud)

这很好.我基本上从一本书中得到了它.现在我想通过使用getElementsByClassName来改进它.我继续写道:

window.onload = prepareLinks;

function prepareLinks() {
    var links = document.getElementsByTagName("a");
    var popups = links.getElementsByClassName("popup");
    for (var i = 0; …
Run Code Online (Sandbox Code Playgroud)

javascript dom

2
推荐指数
1
解决办法
5063
查看次数

将Symfony2中的内容集成到映射(GoogleMaps或其他)服务中

我希望我的内容(让我们说消息)有一个地理位置连接到它们 - 一个存储地理编码或数据库中的地址的列 - 然后使用该地理编码将它们显示在谷歌地图上.我是否需要一个抽象库,或者我可以直接使用Google Maps API吗?在性能和简单性方面,什么是最佳实践?(这对我来说已经是未知的领域)

google-maps google-maps-api-3 symfony

2
推荐指数
1
解决办法
4917
查看次数

如果我的表格有许多不适合我的屏幕的内容,如何使我的表格可滚动/响应?

overflow-x:scroll在面板中添加了,因为我的表格中有很多列,这对于滚动效果很好。但是面板标题的蓝色停止在页面的右侧;之后,面板标题是白色的,看起来很糟糕。如何使蓝色面板标题向右拉伸,使其不只是在页面的右侧被切断?

<div class="panel panel-primary" style="overflow-x:scroll">
    <div class="panel-heading">Heading</div>
        <table class="table table-striped">
            <tr>
                <th></th>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap twitter-bootstrap-3 responsive

2
推荐指数
1
解决办法
1426
查看次数

尝试用CSS选择Semifinal div

我正在尝试使用CSS(3)来选择不是最后一个而不是最后一个的div.所以:

<div id="wrapper">
<div class="panel one"></div>
<div class="panel two"></div>
<div class="panel three"></div>
<div class="panel n"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我总是想在"n"div之前选择前面的div.(div的数量各不相同)

我尝试了n-child(n-1),但它没有用.

css css-selectors

1
推荐指数
1
解决办法
88
查看次数

如何告诉屏幕阅读器使用属性而不是链接文本?

我在无序列表中有一个链接如下:

<li class="savelink">
  <a href="/save"><span>Save</span></a>
</li>
Run Code Online (Sandbox Code Playgroud)

通常屏幕阅读器会显示"保存".是否有可能以及使用哪个属性在不更改实际链接文本的情况下更改该属性?

业务需求是有一个链接,用图标设置样式.该图标将与链接文本互补.例如:

  • "+"符号的图标和链接文本"菜单"等于"添加菜单项"操作.

我尝试了咏叹调标签,没有成功.

accessibility screen-readers wai-aria nvda

1
推荐指数
1
解决办法
1155
查看次数

Javascript性能:缓存与无缓存 - 奇怪的结果

我正在尝试优化一些遍历和隐藏/显示一些无序列表的基本jquery脚本.

这是jsperf中的测试用例:http://jsperf.com/caching-vs-no-caching

我在两个浏览器中运行测试:Chrome和IE7/IE8,令人惊讶的是缓存的情况比较慢 - 稍微但仍然如此.

未经优化的版本是:

(function( $ ) {
  $.fn.menuManipulation = function() {
    this.parents().show();
  };
})( jQuery );

$('.menu-vertical li.selected').menuManipulation();
$(".menu-vertical li.selected > ul.static").show();
$('li.static').has('ul').addClass("with-child");
Run Code Online (Sandbox Code Playgroud)

和缓存的:

(function($) {  
    $.fn.menuManipulation = function() {
    this.parents().show();
    };
})(jQuery);

var menu = $('.menu-vertical');
menu.find('li.selected').menuManipulation();
menu.find('li.selected > ul.static').show();
menu.find('li.static').has('ul').addClass("with-child");
Run Code Online (Sandbox Code Playgroud)

有人可以解释我做错了什么,为什么缓存版本似乎更慢?

performance jquery dom

0
推荐指数
1
解决办法
171
查看次数

Javascript吊装 - David Shariff测验

问题是,以下警告会是什么:

function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = '11';
}
alert(typeof bar());
Run Code Online (Sandbox Code Playgroud)

答案是,功能.

我的问题:

  1. bar()是否被其返回值替换?如果不是,为什么?
  2. 不是foo = 10; 被提升到顶部?(提升)

javascript

0
推荐指数
2
解决办法
568
查看次数