相关疑难解决方法(0)

我有FF,Chrome,IE,Opera和Safari的5个插件/扩展.

如何识别用户浏览器并重定向(单击安装按钮后)以下载相应的插件？

如何使用JavaScript确定确切的浏览器和版本？

如何使用JavaScript检测MacOS X,iOS,Windows,Android和Linux操作系统？

对Web开发很新,请耐心等待.

我想检查浏览器使用的是IE(所有版本).

如果检测到IE,我需要更改CSS.

请指出正确的方向.

我在webapp上成功使用Facebook共享方法,就像使用FB JS SDK一样.

FB.ui({
   method: 'share',
   href: 'https://myapp.com',
})

但是,如果用户使用移动设备访问我的webapp,则需要他们通过浏览器登录Facebook,即使他们在设备上安装了主Facebook应用程序.是否有可能使用本机Facebook应用程序启动共享对话框(如果可用),如果没有回退到浏览器中的Facebook以进行共享.

在获取登录的客户端文件后，我是这样做的：

// HTML 
<script type='text/javascript' src="https://apis.google.com/js/api:client.js" async defer></script>

我将gapi.load()函数调用到 HTML 按钮中

// load the startApp function after the page loads
jQuery(function () {
    $(window).load(function () {
       startApp()
    })
})


var startApp = function () {

    gapi.load('auth2', function () {

        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'xxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
            ux_mode: 'redirect',      // I don't want it to display a pop-up 
            scope: 'profile email'    // I just need to …

在本页的Butterfly Builder应用程序中使用自定义光标,但是当通过调色板部分应用颜色时,Safari没有将光标排列在鼠标移动到的位置..canvas-container已经尝试了这两个以便将其排成一行,但它永远不会奏效:

var pBucketHTML = $('<div id="pBrush"><span class="color"></span></div>');
pBucketHTML.css('top', ((e.offsetY + $(this).offset().top) - (pBucketHTML.height() / 2)));
pBucketHTML.css('left', ((e.offsetX + $(this).offset().left) - (pBucketHTML.width() * 2)));

和

var pBucketHTML = $('<div id="pBrush"><span class="color"></span></div>');
pBucketHTML.css('top', e.pageY - (pBucketHTML.height() / 2));
pBucketHTML.css('left', e.pageX - (pBucketHTML.width() * 2));

我用的很少:

#pBrush {
    width: 24px;
    height: 34px;
    background: transparent url('../images/paintBrush.png') left bottom no-repeat;
    position: fixed;

    .color {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #FFFFFF;
        display: inline-block;
        top: 0;
        right: 0; …

在整天阅读了一种方法之后,我仍然不确定什么对我最好,所有网站都解释同样的事情,但当我想知道真正让我担心的事情时,没有人谈论这个.

我的情况: 我几乎所有的图像都使用宽度100%和高度自动,图像容器有动态尺寸,例如30vw或40%等(不确定在这种情况下我是否还需要设置高度和img标签中的宽度值)

如果我想为我的图像和webp格式提供不同的大小并将决定权交给浏览器选择什么,我需要使用什么？

我可以提供没有图片和源标签的webp图片吗？我可以使用图片方法,仍然让浏览器选择显示的图像吗？

不确定为什么我们需要为最小的图像选择简单的img src后备,在这种情况下,如果有人进入IE和大屏幕,那么图像将始终是pixeled.在这些情况下,我更希望让一些用户等待一段时间,而不是为他们提供低分辨率图像.此外..具有回退选项的低分辨率图像,不确定如何影响单个图像seo排名.

使用时CSS,我可以使用css正确对齐我的元素Chrome.在chrome inspector-> ipad视图中,所有看起来都应该如此.但是当我在实际iPad上测试它时,有些CSS不适用.我发现ipad特定的CSS媒体查询如下,

** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
    padding-right: 0;
}


**/* Safari 10.1+ */**
@media not all and (min-resolution:.001dpcm) { @media
  {
   .my-class {
    padding-bottom: 0;
  }
  }}


  **/* Safari 6.1-10.0*/**
@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    .my_class {
    padding-bottom: 0;
  } 
}}

问题是,虽然它们在纵向模式下工作正常,但我没有指定的方法可以应用于CSS横向模式.如何在iOS上的真实iPad设备/ Safari中使用媒体查询进行横向模式？不影响任何其他浏览器？

更新

我不是在寻找标准媒体查询,

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and …