Сделайте README GitHub выглядеть по-разному на смартфонах и настольных ПК, используя только HTML (CSS ограничено)

Question

У меня есть проект GitHub с файлом README.md. Я вставляю изображение следующим образом

<img src="./logo.svg" align="right" width="180px">

Вот пример такого изображения.

Примечание: GitHub позволяет использовать встроенный HTML, но не CSS, поэтому я использую свойство width вместо css.

Таким образом, изображение занимает правую часть экрана, что позволяет размещать текст на левой стороне.

Проблема: Если вы откроете такую ​​ссылку на смартфоне, слишком мало места для текста, и она выглядит плохо с разделенными словами или буквами, занимающими всю строку. Было бы здорово, если бы я мог использовать больший width специально для мобильных устройств. Но GitHub ограничивает использование CSS в файлах уценки, и я не могу использовать @media запросов.

Вопрос: Как заставить README GitHub выглядеть по-разному на мобильных устройствах и компьютерах без использования CSS

Answer 1

udacity/responsive-images - это:

• проект страницы GitHub, видимый в udacity.github.io/responsive-images/
• со страницей, посвященной адаптивные изображения с примерами .
  Например: " Два изображения шириной 50% с полем ", видимые в examples/1-07/twoImages50pcWithMargin

Проверьте их директивы области просмотра будет достаточно для реализации адаптивного изображения в сочетании с их встроенным стилем CSS.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">