triangletoot.party is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon instance focused on the Triangle region of North Carolina. Keeping out jerks since 2019. Anti-racist, anti-fascist, and anti-TERF.

Server stats:

79
active users

#viewport

1 post1 participant0 posts today
C.<p><a href="https://mindly.social/tags/Congratulations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Congratulations</span></a> to <a href="https://mindly.social/tags/Wikipedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Wikipedia</span></a> for breaking their interface with whatever update they've just deployed.</p><p>In Firefox, the layout for tables goes wider than the viewport, but there is no way to scroll horizontally, so half the content is impossible to see.</p><p><a href="https://mindly.social/tags/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scroll</span></a> <a href="https://mindly.social/tags/viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>viewport</span></a> <a href="https://mindly.social/tags/Firefox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Firefox</span></a> <a href="https://mindly.social/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mindly.social/tags/fail" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fail</span></a></p>
Nelson<p>Since the mobile web era began, web pages have included this <a href="https://jawns.club/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> boilerplate to indicate they've accounted for smartphone screens, so phones shouldn't zoom the <a href="https://jawns.club/tags/viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>viewport</span></a> weirdly:</p><p>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</p><p>Is this whole incantation still necessary on every web page? MDN says the `initial-scale` attribute has "Default: 1": <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#initial-scale" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/HTML/Viewport_meta_tag#initial-scale</span></a></p><p>Does that mean we can skip that attribute? Paging <span class="h-card" translate="no"><a href="https://mas.to/@j9t" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>j9t</span></a></span></p><p>Stackoverflow fail: <a href="https://stackoverflow.com/questions/74384622/is-initial-scale-1-necessary-to-be-included-in-meta-viewport-tag" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">stackoverflow.com/questions/74</span><span class="invisible">384622/is-initial-scale-1-necessary-to-be-included-in-meta-viewport-tag</span></a></p>
Nicolas Hoizey<p>🔗 “The ideal viewport doesn’t exist” by <span class="h-card"><a href="https://bell.bz/@andy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>andy</span></a></span> <span class="h-card"><a href="https://mastodon.social/@leannecodes" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>leannecodes</span></a></span></p><p><a href="https://mamot.fr/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mamot.fr/tags/viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>viewport</span></a> </p><p>⚓️ <a href="https://nicolas-hoizey.com/links/2023/08/25/the-ideal-viewport-doesn-t-exist/" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">nicolas-hoizey.com/links/2023/</span><span class="invisible">08/25/the-ideal-viewport-doesn-t-exist/</span></a></p>
Stef Walter<p>The ideal viewport doesn’t exist:<a href="https://viewports.fyi/" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="">viewports.fyi/</span><span class="invisible"></span></a> <br> You can’t make design decisions based on user’s viewport, instead, go beyond, structure your content, make sure it works at different sizes, with different user conditions, etc. <br><a href="https://front-end.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Responsive</span></a> <a href="https://front-end.social/tags/Viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Viewport</span></a></p>
John Refior<p>What's the lowest viewport resolution you're committed to supporting?<br>--<br><a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://hachyderm.io/tags/viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>viewport</span></a></p>
John Refior<p>Ran into this problem testing on my mom's iPad. Can't rely on pure CSS for viewport height<br><a href="https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chanind.github.io/javascript/2</span><span class="invisible">019/09/28/avoid-100vh-on-mobile-web.html</span></a><br>--<br>Update: thanks for the info/correction! I'm trying out the new units (replacing 100vh)<br>--<br><a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://hachyderm.io/tags/iOS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>iOS</span></a> <a href="https://hachyderm.io/tags/viewport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>viewport</span></a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a></p>