While I cannot provide you with a case study on the matter I have done a lot of research (~24 consecutive hours) and I can provide you with both my methods and reasonings as to why I believe them to be both sound and practical:
In my websites, the ones I write, I style my buttons to be:
- 25% of the width of their containers in large desktop sizes (900-1000px+),
- 50% on tablet sizes (600-700px+) and
- 100% in mobile phone sizes (300-400px+).
The exact ranges depends on what you wish to use. Here is my reasoning:
- Larger screen sizes tend to be desktop computers and even when they are touch controlled require less area relative to the entire screen
- as the real estate of the end-user's screen becomes smaller, the relative area of interactive elements must increase to maintain functionality (think Apple Watch or Galaxy Gear vs mobile phone vs computer).
Making buttons larger relative to smaller screen sizes (widths) was the most obvious solution I could make.
To conclude on the topic of button size, your logic is sound, and your concern is a very real one. Thank you for asking! I'm glad more people care about this!
You also mentioned left aligned buttons on desktop!
Research & Illustrations
Here are some images and sources which back up my points made earlier, and hopefully bridge the gap if I did not explain myself clearly enough (I provide the images and quotes only as a archive of both what I feel best answers the question, and as a way to prevent loss of information if the following sources were to cease to exist):
Most natural thumb areas on mobile phones:
And on the larger side of things, the natural touch regions of laptop devices:
Honestly when it comes to what makes a good button placement, this second link does a wonderful job at describing what is best for the comfort of all users, short of providing (cookie-based if anonymous website use) options for left vs right handed use:
The Thumb's Natural Arc
only a third of the screen is truly effortless territory: at the bottom, on the side opposite the thumb. For example, if you hold a phone in the right hand, your thumb falls naturally in an arc at the bottom left corner of the screen—no stretching your thumb or shifting the phone required. The same arc shape applies to the two-handed cradle grip, but the arc is larger because the thumb has greater range of motion.
Left vs Right Hand Operation
What about lefties? The thumb zone flips from left to right. But this left-versus-right distinction isn’t especially crucial, since most of us switch hands easily (and frequently) depending on context. Even so, optimizing for one hand penalizes the other: the best solutions put core features at screen middle, where left and right thumb zones overlap. In the end, top versus bottom is more important than left versus right. No matter which hand you use, screen bottom is most comfortable, while the top demands a stretch. That rule holds true for all phone screens, large or small, but as phones grow to jumbo dimensions, that top-screen stretch becomes a strain.
Phablet Zones Shift
The size and shape of the thumb zone shifts when the phone’s dimensions require support from the little finger.
Natural Tablet Regions
We tend to grab tablets at the sides, and while the specific location wanders up and down, thumbs settle at the middle to top third of the screen. This grip makes the neighboring sides and top corners most friendly to touch. On the flip side, the top and bottom edges of tablet screens are hostile zones, because of the necessary reach. The bottom is especially tough, since thumbs are rarely near the bottom...
So there you have it! I hope that the information provided is as helpful for you as it was for me! While I knew most of the information already, it was very helpful to find that someone had created some wonderful illustrations and I hope this helps many others as well!