How to Design for Different Mobile Phone Viewports?

Four multiracial people using mobile phone outdoors

As a responsive web designer, you can design your website to adjust to different screen sizes and mobile viewport widths by using CSS media queries. A media query allows you to apply different styles based on the characteristics of the device being used to view the website, such as its screen size and orientation.

Here’s a simple example of a media query to target devices with a screen width of 320px or less:

@media (max-width: 320px) {
/* Add your styles here */

You can use media queries to create specific styles for each of the common screen sizes, ensuring that your website is optimized for different devices. You can also use CSS grid and flexbox to create flexible and responsive layouts that adjust to different screen sizes.

Additionally, it’s important to consider other factors such as touch support and accessibility and to test your designs on a variety of different devices to ensure that they look and work as intended.

The widths of mobile phone viewports vary widely based on the specific device and screen size. Here are some common mobile phone screen sizes and their corresponding viewport widths:

  • iPhone 5/SE: 320px
  • iPhone 6/7/8: 375px
  • iPhone 6 Plus/7 Plus/8 Plus: 414px
  • iPhone X/XS/11 Pro: 375px
  • iPhone XR/11: 414px
  • iPhone 12 Mini: 390px
  • iPhone 12/12 Pro: 390px
  • iPhone 12 Pro Max: 428px

Keep in mind that these are just rough estimates, and actual device dimensions can vary slightly. Additionally, users can also zoom in or out on their screens, which would affect the viewport width.

Leave a comment

Recent Posts

Smiling woman florist taking picture with her plants for publishing in social media
Social Media Marketing
Dustin Gray

Plan a Powerful Social Media Marketing Strategy

Grow Your Business With Social Media Marketing Social media marketing is a form of digital marketing involving various social media platforms to promote and advertise products and services. It leverages social media platforms’ popularity and widespread use to connect with target audiences, engage users, and build relationships. The primary goal of social media marketing is 

Read More »
Smiling business owner working on laptop for livestreaming on social media, selling online.
Social Media Marketing
Dustin Gray

Unleashing the Power of Free Social Media Management Tools for Your Business

It’s incredible how social media has transformed from just a platform for personal connections to a powerful marketing tool. now, it acts as a great way to reach your audience and promote your brand. Billions of people use it worldwide, making it a fresh and effective tool.  Choose a social media management tool that can

Read More »
Marketing, business people and meeting in office, startup and digital marketing company for teamwor
Digital Marketing
Dustin Gray

Navigating the Marketing Funnel: Understanding ToFu, MoFu, and BoFu Strategies

The marketing funnel is a widely recognised framework businesses use to guide potential customers through various stages of the buyer’s journey. This framework involves three critical steps, namely the Top of the Funnel (ToFu), Middle of the Funnel (MoFu), and Bottom of the Funnel (BoFu). Businesses can effectively move potential customers towards purchasing by creating

Read More »
Young software engineers team developing website design and coding technologies in startup company.
Website Design
Dustin Gray

Website Audits and Their Importance: Your Online Visibility

If there’s one way your business can make a revolutionary impact, it’s through your website. Your website is a powerful tool to attract and engage with customers. Your content has the power to influence minds and bodies. Doing a regular website audit is essential to ensure your website performs optimally.  What is a website audit?

Read More »
Marketing planning strategy
Marketing Strategy
Dustin Gray

How Competitor Analysis Impacts Your Marketing Strategy: Unraveling the Benefits

In modern marketing, analysing your competitors’ strategies can be a secret weapon that helps your business grow. This process is called competitor or competitive Analysis. It can give your company many advantages and help it succeed in a competitive market. It can be performed on a higher level or at a lower level.  Competitor analysis

Read More »
Phrase get more leads written on sticky note with alarm clock,magnifying glass and book.
Lead Generation
Dustin Gray

The Power of Lead Generation: Driving Growth for Small and Mid-Level Businesses

For small and mid-level businesses (SMBs), lead generation is not just a marketing buzzword; it’s a fundamental strategy for growth and sustainability. Generating quality leads is the process of attracting and capturing potential customers’ interest in your products or services. In this blog, we will explore the significance of lead generation for SMBs, backed by

Read More »