标签: responsiveness

{
  'receiverList': {
    'receiver': [
      {
        'primary': false, 
        'email': 'redacted@example.com', 
        'amount': '.51'
      }
    ]
  }, 
  'memo': 'redacted', 
  'returnUrl': 'http://oursite.example.com', 
  'cancelUrl': 'http://oursite.example.com', 
  'feesPayer': 'EACHRECEIVER', 
  'actionType': 'PAY', 
  'currencyCode': 'USD', 
  'requestEnvelope': {}, 
  'ipnNotificationUrl': 'http://oursite.example.com'
}

Run Code Online (Sandbox Code Playgroud)

收到回复后，我们将 Apple Safari (iOS 13.6.1) 中的买家重定向到：

https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=mini&paykey=AP-1234567

我们得到以下页面（登录前一个，登录后第二个）：

已为买家帐户启用 PayPal OneTouch。参考：https : //www.paypal.com/us/webapps/mpp/one-touch-checkout

买家使用美国的 PayPal 账户在美国付款。

问题：

该布局不适用于移动设备。很难阅读和导航。
贝宝不记得我以前的身份验证。

如何解决？

paypal paypal-sandbox ios adaptive-parallel-payment responsiveness

Vla*_*zan

lucky-day

9
推荐指数

1
解决办法

129
查看次数

如何使用 Jetpack Compose 创建响应式布局？

在传统视图系统中，我通过使用偏差/指南/权重/wrap_content/避免硬编码尺寸/在约束布局中相对于彼此放置视图、使用“sdp”和“ssp”等来处理响应能力。

如何使用 Jetpack Compose 创建响应式布局？我一直在寻找有关它的信息但无法找到。

请帮忙！

android responsiveness android-jetpack-compose

Spa*_*tta

lucky-day

9
推荐指数

1
解决办法

4941
查看次数

Fullpage.js和移动设备:如果必须启用内容溢出,如何启用部分/滑动切换？

在尝试了一些选项后,我仍然没有得到令人满意的结果:

使用过的Javascript库是FullpageJS(http://alvarotrigo.com/fullPage/)

使用以下设置初始化Fullpage.js:

$('#fullpage').fullpage({
   sectionsColor: colors,
   anchors: anchors,
   scrollOverflow: true,
   afterSlideLoad: function() {
      startTheSliders();
   },
   onLeave: function(index) {
        setTimeout(function() {
            $.fn.fullpage.scrollSlider(index,0);
        },1000);
   }
});

Run Code Online (Sandbox Code Playgroud)

重要提示:根据文档scrollOverflow:true设置(并且必须设置为true),因为特别是在移动设备上,幻灯片的内容有时会高于屏幕高度.

但是,绝对要求用户可以用手指(不是导航)在幻灯片之间水平和垂直切换.预期的行为如下:

如果手指向左或向右移动,水平开关开关滑动
垂直开关滑动:仅当滑动滚动到底部并且手指向下移动时,下一个底部滑动.下一张顶部幻灯片:仅当幻灯片滚动到顶部并且手指向上移动时.

开发项目可以在这里找到:http://www.studiodankl.com/studiodankl/

mobile jquery touch fullpage.js responsiveness

Bla*_*bam

2019 05-21

8
推荐指数

1
解决办法

2万
查看次数

响应语义UI反应网格,列,行

我无法使Semantic UI React网格完全响应,至少以桌面,平板电脑和移动设备的方式响应.

我有三个组件,我在网格列中呈现.

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

Run Code Online (Sandbox Code Playgroud)

从桌面移动到移动时,列正确堆叠.它从3列到1列.然而,在平板电脑尺寸下,3列只是更紧密地安装而不是在屏幕上有2列,而1在下面堆叠.

查看组件的组件 平板电脑视图

理想情况下,我希望Feed和Jobs在从桌面到平板电脑尺寸时保持在屏幕上,当从平板电脑转到移动设备时,请将Feed放在首位,将作业放在下面,将文章放在底部.

如何让这个网格响应这样的任何帮助表示赞赏.

css grid responsive-design responsiveness semantic-ui-react

Gen*_*eep

lucky-day

8
推荐指数

1
解决办法

8989
查看次数

Bootstrap Mobile无法正常工作

我曾多次使用过Bootstrap,并且只在缺少元视口标记时才看到此问题.但是,这已加载,我仍然遇到移动设备上的Bootstrap问题.可能有人知道还有什么可能导致这个？

问题:

按钮路线显示
样式无法正常显示
CSS在视图中显示
移动导航失踪
格式化/对齐关闭

头:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Training Portal</title>
    <!-- bootstrap/jquery -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- custom stylesheet -->
    <link href="<?= base_url("stylesheets/cust.css"); ?>" rel="stylesheet" type="text/css" media="screen">

  </head>

Run Code Online (Sandbox Code Playgroud)

脚本结束时<body>:

    <!-- scripts -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="<?= base_url("assets/script.js"); ?>"></script>

    <!-- Bootstrap JavaScript -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </body>

Run Code Online (Sandbox Code Playgroud)

视口数据也添加到CSS:

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

Run Code Online (Sandbox Code Playgroud)

手机问题示例:

在此输入图像描述

这在桌面上看起来像什么:

在此输入图像描述

html mobile responsive-design twitter-bootstrap responsiveness

Lau*_*n F

lucky-day

7
推荐指数

1
解决办法

1815
查看次数

Div使用CSS重新排序

有没有人知道如何实现以下任何示例或教程:

在桌面上,布局将是:

在移动设备上,布局将更改为:

正如您所看到的,我希望方框2和方框3在移动设备上重新排序和交换位置

有人有任何提示或建议吗？

css responsive-design responsiveness

use*_*681

lucky-day

7
推荐指数

1
解决办法

1万
查看次数

MaterialiseCSS如何使行列高度相同？

我在materializeCSS上有一个基本网格我的问题是我的列高度不一样,所以我的布局变得一团糟.我知道这已经在bootstrap问了,但是这个解决方案在materializeCSS中对我没有任何帮助

这是我的jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

grid materialize responsive-design responsiveness responsive

eLj*_*dii

2016 06-11

7
推荐指数

1
解决办法

1万
查看次数

如何在Bootstrap v4中为表指定响应列宽

在Bootstrap 3中,我可以轻松设计响应敏感的表.我可以将列拆分成他们的网格系统.不仅如此,我还可以为小型设备隐藏一些列.这是我的例子.该表有13列.前两列各有25%的宽度,其余列将共享其余50%的宽度.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-xs-3">1</td>
  <td class="col-xs-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

上面的代码在Bootstrap 4中不起作用.您可以看到不希望列宽.我检查了他们的发行说明,它没有提到表格布局的任何重大变化.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-3">1</td>
  <td class="col-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

现在,如果我添加style="width:25%"前两列,它将起作用.现在我想弄清楚,我的用法是否错误,或者Bootstrap 4无法指定响应列宽度.任何提示都非常感谢.

更新#1 关于@CamiloTerevinto的建议,col-xs-*现在重命名为col-*.

更新#2 我在他们的问题跟踪器中发现了一些相关的讨论:

对此的临时解决方法是设置<tr …

css twitter-bootstrap responsiveness bootstrap-4

sta*_*005

2017 06-08

7
推荐指数

1
解决办法

7573
查看次数