那些遇到过的问题

小编Joe*_*ing的帖子

为什么Chrome for Mobile中的段落文字会缩小？

问题出现在Chrome/Android以及其他移动设备上的Chrome上.到目前为止,我只能在Nexus 5x上进行测试.我正在使用Handlebars.js动态显示段落标记内的引号.每当显示的引号少于三行时,font-size会缩小.我很难调试这个字体大小调整问题,因为它似乎只发生在Chrome for Mobile上.该问题不会在Chrome开发工具响应模式中复制.在IOS Safari或Firefox Mobile 中不会发生字体大小调整.

如果您在移动设备上安装了Chrome,那么您是否可以浏览游戏并查看是否发现了问题？链接在这里

这是一个显示字体大小变化的视频:问题视频

这是两张并排的图片,用于说明问题.左图中的字体比右图中的字体大:

在此输入图像描述 在此输入图像描述

以下是该站点该部分的代码(链接到存储库):

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p {
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="game-screen">
  <div id="game-pictures">
  </div>
  <div id="game-quotes">
    <h6 class="center">Quote {{counter}}/10</h6>
    <p>"{{content}}"</p>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有没有人知道可能导致这种字体大小调整的原因？ …

html css android google-chrome responsive-design

Joe*_*ing
2019 11-07
17
推荐指数
2
解决办法
1037
查看次数

我可以将rspec --format文档设置为默认值吗？

根据Rspec文档,默认情况下,当您运行时,您将rspec获得进度格式化程序(如下所示:"......").

还有另一种格式化选项rspec --format documentation可以逐个完成每个测试.我的问题:如何--format documentation在默认情况下启用,而不必每次都在命令行中键入它？

ruby rspec ruby-on-rails

Joe*_*ing
lucky-day
8
推荐指数
3
解决办法
2332
查看次数

内联SVG随Flexbox消失

我试图使用Flexbox在垂直和水平方向中心内联SVG元素.出于某种原因,当我display: flex在父容器上时,内联SVG就会消失.

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/> …
Run Code Online (Sandbox Code Playgroud)

html css svg sass flexbox

Joe*_*ing
lucky-day
7
推荐指数
2
解决办法
4131
查看次数

使flexbox行成为最短子元素的高度？

我在使用Flexbox时遇到了一些困难.目标是使一行与最短的子元素具有相同的高度.以两幅图像为例,一幅高度为200px,另一幅高度为120px.当<img>元素是flex元素的直接子元素时,下面的示例按预期工作.

.row {
  display: flex;
  width: 100%;
  background: orange;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>
Run Code Online (Sandbox Code Playgroud)

但是,在以下示例中,flexbox元素的高度扩展为最高的子元素:

.row {
  display: flex;
  width: 100%;
  background: orange;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="row">
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  </div>
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

什么是使<div class="row">最短子元素的高度的解决方案？

html css css3 flexbox

Joe*_*ing
2019 01-23
6
推荐指数
2
解决办法
1188
查看次数

屏幕阅读器在到达锚标记时停止阅读段落

我试图让屏幕阅读器（在本例中为 VoiceOver）连续读取一段文本。里面的文本<p>被屏幕阅读器读取，但一旦到达第一个<a>标签就会停止。然后，用户必须在这两个链接之间切换，才能将<a>标签中的文本读给他们听。

<p>
  Thank you for visiting this website. If you experience any difficulty in accessing this website please email us at <a href="mailto:info@info.com">info@info.com</a>or call us at<a href="tel:1111111111">111-111-1111.</a>
</p>
Run Code Online (Sandbox Code Playgroud)

是否有更易于访问的方式向用户提供信息？

html accessibility screen-readers voiceover

Joe*_*ing
2019 04-24
6
推荐指数
1
解决办法
924
查看次数

HTML5 Canvas + JS 不适用于 IOS/Safari

我已经实现了一个带有 javascript 粒子效果的画布元素。该效果适用于除 IOS/Safari 之外的所有浏览器。我做了一些研究，IOS/Safari 支持 HTML5/Canvas：根据HTML5/Canvas 的浏览器支持图表

$(function() {
  var WIDTH = window.innerWidth * .9,
    HEIGHT = window.innerHeight,
    MAX_PARTICLES = 100,
    DRAW_INTERVAL = 60,
    canvas = document.querySelector('#pixies'),
    context = canvas.getContext('2d'),
    gradient = null,
    pixies = new Array();

  function setDimensions() { 
    WIDTH = window.outerWidth;
    HEIGHT = window.innerHeight;
    canvas.width = WIDTH; 
    canvas.height = HEIGHT; 
  }

  setDimensions();
  window.addEventListener('resize', setDimensions);

  function Circle() {
    this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};

    this.reset = function() …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery canvas

Joe*_*ing
2017 05-16
5
推荐指数
1
解决办法
8711
查看次数

Pug：如何在所有页面中包含 mixin？

我有一个includes/mixins.pug包含一些 mixin的文件。我也有一个主要布局文件layouts/default.pug，我extend-ing。我怎样才能在我的布局文件中包含这些 mixin，这样我就不必include includes/mixins在每一页上都写？

例如，这就是我必须为每个额外的 pug 文件做的事情。在这种情况下：new_page.pug

extends layouts/default
include includes/mixins

block content
  +my_mixin('Hello World')
Run Code Online (Sandbox Code Playgroud)

layouts/default.pug

doctype html
html(lang=$localeName)
  block vars
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1.0") 

    block styles
    link(rel="stylesheet" type="text/css" href="/assets/css/styles.min.css")
  body
    block content
Run Code Online (Sandbox Code Playgroud)

我如何在 中包含mixin layouts/default.pug？我无法在文档中找到解决方案。

html javascript pug

Joe*_*ing
2018 05-19
5
推荐指数
1
解决办法
1351
查看次数

Next.JS -- getInitialProps 通过 ContextProvider 将 props 和 state 传递给子组件

我正在使用getInitialProps()in_App.js来获取一些 api 数据，并且我想通过 React Context 将该数据作为道具传递给我的其他组件。我想通过构造函数用状态初始化上下文提供程序。

首先我通过createContext().

config/Context.js：

import { createContext } from 'react';
const Context = createContext();
export default Context;
Run Code Online (Sandbox Code Playgroud)

然后我使用构造函数在它自己的组件中创建 Context.Provider 来初始化状态。

provider/ContextProvider.js：

import React, { Component } from 'react';
import Context from '../config/Context';

class ContextProvider extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      filters: {
        active: true,
        headerActive: false
      }
    };
  }

  render() {
    return (
      <Context.Provider>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default ContextProvider;
Run Code Online (Sandbox Code Playgroud)

在_app.js我内部进行 …

javascript reactjs next.js

Joe*_*ing
2019 03-22
4
推荐指数
1
解决办法
7779
查看次数

CSS 过渡：不透明度和可见性过渡不适用于 Firefox（适用于 Chrome / Safari）

我正在尝试在全屏覆盖上创建一个全宽和全高的过渡，并且具有非活动样式visibility: hidden和opacity: 0。单击汉堡包图标时，.active会向 div 添加一个类，它具有以下样式：visibility: visible和opacity: 1。

这是CSS：

  .overlay {
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: '#272727';
    z-index: 100;
    transition: visibility 500ms ease, opacity 500ms ease;
    visibility: hidden;
    opacity: 0;
    &.active {
      visibility: visible;
      opacity: 1;
    }
  }
Run Code Online (Sandbox Code Playgroud)

在 Chrome 和 Safari 上，转换按预期进行，但在 Firefox 上，转换的“淡入”部分失败。它基本上是从第一帧跳到最后一帧而不进行转换。如果您想查看该页面的实际效果，请点击以下链接：链接至网页

如果您无法在浏览器屏幕录制中重现问题，则会出现一段视频：

为什么此转换在 Firefox 上不起作用？

html css transition

Joe*_*ing
lucky-day
4
推荐指数
1
解决办法
6610
查看次数

为什么 flex div 的宽度是父 div 的 100%？

我很困惑为什么 flex div 占据其父元素的 100% 宽度。采取以下片段：

#wrapper {
  width: 100%;
  height: 100px;
  background: green;
}

#flex {
  color: white;
  display: flex;
  flex-direction: row;
  background: blue;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="wrapper">
   <div id="flex">
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

为什么 flex div 会扩展到父级的 100% 宽度？有没有办法使 Flex div 的宽度仅与其中内容的宽度相同？

任何帮助表示赞赏，谢谢

html css flexbox

Joe*_*ing
2018 09-07
3
推荐指数
1
解决办法
2991
查看次数

iOS全屏应用程序：为什么页面更改时会出现工具栏？

我继承了一个 React Web 应用程序，该应用程序旨在用作 Safari IOS 移动设备上的全屏应用程序。您可以通过执行以下操作使应用程序全屏显示并隐藏地址栏：

  1. 在 Safari 中打开应用程序 ( https://app.1wsq.com )
  2. 点击底部工具栏上的按钮
  3. “添加到主屏幕”

这会在主屏幕上添加一个图标，当您点击它时，它会全屏打开应用程序。但是，当您导航到网站上的另一个页面时，会出现以下工具栏：

在此输入图像描述

这个工具栏不是普通的地址栏，它似乎是一个辅助工具栏。我不确定是什么导致它出现。

我看过的堆栈问题：

如何使 iPhone/iPad Web 应用程序保持全屏模式？-- 这个问题似乎是针对多页面应用程序，并且建议的链接技巧不适用于使用react-router-dom 进行跨页面导航的React SPA。

我尝试过的事情：

我的网络应用程序上有以下元标记：

<meta name="apple-mobile-web-app-capable" content="yes">

safari ios reactjs

Joe*_*ing
2020 07-14
3
推荐指数
1
解决办法
2837
查看次数

为什么 Rails 身份验证控制器路由复制身份验证参数？

我在 rails 控制器中有signup和signinPOST 路由。signup需要一个email,password和password_confirmation。signin需要一个email和password。

以下是路线的样子：

class Api::V1::AuthController < ApplicationController

  def signup
    binding.pry <-- inspect the params here
    @user = User.create(user_credential_params)
    if @user.valid?
      @token = encode_token(:user_id => @user.id)
      render json: { :user => @user, :jwt => @token }, :status => :created
    else
      render json: { :error => 'Failed to create user' }, :status => :not_acceptable
    end
  end

  def signin
    @user = User.find_by(:email => …
Run Code Online (Sandbox Code Playgroud)

ruby ruby-on-rails

Joe*_*ing
lucky-day
2
推荐指数
1
解决办法
119
查看次数

Node.js-为什么JSON.parse混淆响应主体中的对象？

当我使用JSON.parse并注销该require模块获取的某些数据时，将记录嵌套对象[Object]。下面是一个示例（当前使用Node版本10.15）：

const request = require("request");

const url = "https://www.reddit.com/r/javascript.json";

request(url, (error, response) => {
  const data = JSON.parse(response.body);
  console.log(data)
});
Run Code Online (Sandbox Code Playgroud) 

{ kind: 'Listing',
  data:
   { modhash: '',
     dist: 26,
     children:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ],
     after: 't3_bf4cl6',
     before: null } }
Run Code Online (Sandbox Code Playgroud)

我在看这个问题：JSON.parse从JSON返回[对象]

问的人很好奇为什么在JSON.parse之后，对象被记录为[Object]。最高答案指出JSON.parse隐藏数据的原因是为了提高可读性。但是答案并没有说明替代默认行为的方法。

如何获取JSON.parse记录完整数据？有没有办法覆盖默认行为？

javascript json node.js

Joe*_*ing
lucky-day
0
推荐指数
1
解决办法
67
查看次数

标签 统计

html ×8

css ×6

javascript ×4

flexbox ×3

reactjs ×2

ruby ×2

ruby-on-rails ×2

accessibility ×1

android ×1

canvas ×1

css3 ×1

google-chrome ×1

ios ×1

jquery ×1

json ×1

next.js ×1

node.js ×1

pug ×1

responsive-design ×1

rspec ×1

safari ×1

sass ×1

screen-readers ×1

svg ×1

transition ×1

voiceover ×1