[PR #121] [MERGED] Add viewport width to support responsive design #200

New issue

Closed

opened 2026-03-03 16:05:59 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 16:05:59 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/mthenw/frontail/pull/121
Author: @andrew-js-wright
Created: 4/11/2018
Status: ✅ Merged
Merged: 4/11/2018
Merged by: @mthenw

Base: master ← Head: fix/mobile-viewport

📝 Commits (1)

be498a6 Add viewport width to support responsive design

📊 Changes

1 file changed (+2 additions, -1 deletions)

View changed files

📝 web/index.html (+2 -1)

📄 Description

The UI is built to respond to the width of the screen it is being
displayed on and provide the best experience across devices. When I tried
to view logs streaming on my phone (Apple iPhone 6s), site was
attempting to render the "bigger-screen" version.

This is because, by default, mobile browsers advertise a bigger "view
port" than screen size, to allow compatibility with non-responsive sites.
In order to benefit from the responsiveness provided, the viewport meta
tag needs to be overwritten. More on that tag can be found at
mdn.

Before
screen shot 2018-04-11 at 10 41 08

After
screen shot 2018-04-11 at 10 41 24

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/mthenw/frontail/pull/121 **Author:** [@andrew-js-wright](https://github.com/andrew-js-wright) **Created:** 4/11/2018 **Status:** ✅ Merged **Merged:** 4/11/2018 **Merged by:** [@mthenw](https://github.com/mthenw) **Base:** `master` ← **Head:** `fix/mobile-viewport` --- ### 📝 Commits (1) - [`be498a6`](https://github.com/mthenw/frontail/commit/be498a660b4214623d2a4985546c44af2a54840a) Add viewport width to support responsive design ### 📊 Changes **1 file changed** (+2 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `web/index.html` (+2 -1) </details> ### 📄 Description The UI is built to respond to the width of the screen it is being displayed on and provide the best experience across devices. When I tried to view logs streaming on my phone (Apple iPhone 6s), site was attempting to render the "bigger-screen" version. This is because, by default, mobile browsers advertise a bigger "view port" than screen size, to allow compatibility with non-responsive sites. In order to benefit from the responsiveness provided, the viewport meta tag needs to be overwritten. More on that tag can be found at [mdn](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). **Before** <img width="486" alt="screen shot 2018-04-11 at 10 41 08" src="https://user-images.githubusercontent.com/2773538/38609053-080c2458-3d75-11e8-9dd7-1f1260a44688.png"> **After** <img width="484" alt="screen shot 2018-04-11 at 10 41 24" src="https://user-images.githubusercontent.com/2773538/38609077-10e3e426-3d75-11e8-944e-b73364df2a0f.png"> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>