рендеринг значка гамбургера в виде «X» - это несколько мобильных телефонов, в остальном нормально на настольном компьютере и многих других мобильных телефонах Проблема Специально замечена на Xiaomi - PullRequest
Новая
       3

рендеринг значка гамбургера в виде «X» - это несколько мобильных телефонов, в остальном нормально на настольном компьютере и многих других мобильных телефонах Проблема Специально замечена на Xiaomi

0 голосов
/ 14 января 2019

Три горизонтальные линии значка гамбургера отображаются на нескольких мобильных телефонах как "X". В других мобильных телефонах и на рабочем столе значок гамбургера отображается правильно в виде трех горизонтальных линий. Чтобы быть более конкретным, это на всех мобильных телефонах XIAOMI во всех браузерах.

<Head> код 

</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

А <Body> код 

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
  <div class="site-name">ABCD</div>

Мне пришлось вставить некрасивый текст «МЕНЮ».

Снимок прилагается. введите описание изображения здесь

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Вместо этого вы можете нарисовать значок с помощью CSS, не надеясь, что у каждого клиента есть шрифт. 

.hamburger {
 display: inline-block;
 }

.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
}
<div role="button" class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>
0 голосов
/ 15 января 2019

Если ваш Клиент не имеет определенного шрифта, есть определенные способы его исправить:

  • Использовать шрифт CDN Мой предпочтительный вариант использования Font-Awesome
  • Доставка шрифта по запросу

Использовать шрифт CDN

Поскольку этот метод более подходит, поскольку вы не пытаетесь включить случайный шрифт, но хотите использовать шрифт для отображения значков. Я предлагаю вам использовать FontAwesome . Он только предоставляет гораздо больше забавных и бесплатных иконок для использования.

Просто включите его, как описано на их стартовой странице : 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Чтобы использовать значок гамбургера, просто сделайте это так: 

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
  <div class="site-name">ABCD</div>

Часть <i class="fas fa-bars"></i> включает в себя значок. Класс fa-bars используется для ссылки на конкретный значок FontAwesome. Например, измените его на fa-caret-down, чтобы увидеть этот значок .

Обратите внимание, что я не уверен, нужен ли вам hamburger класс css, поскольку вы еще не поделились его кодом. Сказано, что это решение будет включать иконку без CSS.

Доставка шрифта по запросу

Просто загрузите ваш шрифт в папку wwwroot/font и свяжите его с вашим CSS: 

/*default version*/
@font-face {
    font-family: 'lovelyFont';
    src: url('fonts/lovely_font.eot'); 
    src: 
        local('Lovely Font'),
        local('Lovely-Font'),
        url('fonts/lovely_font.otf') 
        format('opentype');
}
/*bold version*/
@font-face {
    font-family: 'lovelyFont';
    src: url('fonts/lovely_font_bold.eot'); 
    src: 
        local('Lovely Font Bold'),
        local('Lovely-Font-Bold'),
        url('fonts/lovely_font_bold.otf') 
        format('opentype');
    font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

Обязательно проверьте ссылку для этого.

Резюме

Я бы, безусловно, согласился с подходом CDN / FontAwesome, так как он обеспечивает гораздо больше юзабилити. Найдите любую иконку и просто включите ее. С другой стороны, он также добавляет новую зависимость в ваш проект, что не всегда является желаемым выбором.

Если это так, используйте подход «Доставить свой собственный шрифт». Убедитесь, что он содержит нужные вам иконки, и вы готовы к работе. Лучше всего использовать это решение, если вам действительно нужно предоставить свой собственный шрифт. Он также может содержать упрощенную версию логотипа вашей компании или что-то подобное.

Надеюсь, это прояснит для вас. Если вам интересно, почему ваше текущее решение не работает, взгляните на terence eden's Response .

0 голосов
/ 14 января 2019

Символ, который вы видите - который выглядит немного как X в коробке - это символ Android для «Я не могу найти этот символ в моих встроенных шрифтах».

Вам необходимо предоставить шрифт - или Icon Font - для этого конкретного символа (U + 2630).

Что касается того, почему Xiaomi не поддерживает это ... Это может быть, потому что ☰ - это китайский символ "триграмма для небес". Возможно, они не включали китайские шрифты в некитайский телефон.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...