Today, most modern smartphones come with 720p or 1080p resolution screens. This means that even on smaller screens, like a 4-inch display on a Galaxy s3, we can still view all the text and GUI elements (such as email textboxes) on a website when we first open it.
However, while we can see the small email textbox on a mobile browser, it is often too tiny for us to easily enter data. This leads to the need to constantly zoom in on the page, which can be time-consuming.
Here's an idea I'm considering, although it may seem a bit unusual:
I want to create a website, similar to a typical site like mydomain.com, but with significantly larger buttons and text. For example:
.myNormalMobileFont{
font-size: 500%;
}
.myNormalLargeFont{
font-size: 700%;
}
The concept is that regardless of whether I open the website on a mobile device or desktop, it will always display with large buttons and text.
Another observation I've made is that when I access certain article pages on my mobile, they often redirect me to a mobile web version. However, I have never come across these mobile versions when browsing on a desktop. Where do websites typically hide their mobile web versions?
The mobile website I am envisioning would have functionality similar to a regular desktop site, but with oversized buttons and text for easier navigation.
Can anyone shed some light on this situation?