cover letter

how to make html page fit mobile screen

Search icon

.css-1q79kkk-skeletonStyles-Skeleton{background-color:#eee;background-image:linear-gradient( 90deg,#eee,#f5f5f5,#eee );background-size:200px 100%;background-repeat:no-repeat;border-radius:4px;display:inline-block;line-height:1;width:100%;-webkit-animation:animation-bzdot9 1.2s ease-in-out infinite;animation:animation-bzdot9 1.2s ease-in-out infinite;}@-webkit-keyframes animation-bzdot9{0%{background-position:-200px 0;}100%{background-position:calc(200px + 100%) 0;}}@keyframes animation-bzdot9{0%{background-position:-200px 0;}100%{background-position:calc(200px + 100%) 0;}} ‌

When you purchase through links in our articles, we may earn a small commission. This doesn't affect our editorial independence .

Three Ways Windows 8 Will Fit Your Screen

Apple’s new iPad is dominating the news with its Retina display that “ takes your breath away .” Microsoft wants everyone to know that Windows 8, said to be released this October , will support many types of displays, including Retina-like quad-XGA displays. This is to enable Metro apps to look good on both tablets and big screens, yet be easy for developers to create.

On Wednesday, David Washington, a senior program manager on Microsoft’s User Experience team, detailed on the Building Windows 8 blog how Windows 8 will accommodate not only devices of various screen sizes and resolutions, but also screen densities.

Here are the three ways to measure a screen, and how Microsoft is addressing them in Windows 8.

1. Screen Size

Windows 8 supports many screen sizes. Washington talked the least about screen size–the diagonal, corner-to-corner measurement of the display area of the screen. The screen sizes available in devices varies immensely, from 1 inch in small handheld devices to well over 600 inches in a stadium display. Microsoft is focusing on screens for three primary uses: “Slates” that tend to be 10.1 to 17 inches, “Workhorse PCs” typically from 12 to 15.6 inches, and “Family Hubs” that are either large monitors or, more commonly, high definition televisions 23 inches and larger. Windows 8, especially on the Metro interface, is designed to look and function well in all three scenarios.

2. Screen Resolution

how to make html page fit mobile screen

Relating to maximum resolution, Washington said, “You can run Metro style apps on a screen as big as 30 inches with a resolution of 2560 x 1600.” Though it’s unclear if this means Metro will not run on a higher resolution, it’s more likely that this is an example of a large resolution that Metro supports.

3. Screen Density

Windows 8 enables three optimum scaling factors. Screen density as a measurement hasn’t been used much until recently. Screen or pixel density refers to the number of pixels in a physical area, also known as dots per inch (DPI). Apple made the concept popular when it first introduced the Retina display in its iPhone 4, and critics are raving about the 9.7-inch, 2048 x 1536 resolution, 264 DPI version in the new iPad. Since the new iPad has twice as many pixels in each dimension, screen elements in iOS are scaled up 200 percent so they don’t look tiny, and remain touch friendly.

Windows 8 will support a much wider range of devices than iOS, so Microsoft is targeting three scaling factors that apps will automatically adjust to so they are appropriately sized on any screen:

Coupon Codes

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How can I make an html page automatically fit mobile device screens?

I am putting a Formidable Form on an html page by using an <iframe> , but I'd like it to be full screen on a mobile device. So far I'm using the following code:

I believe it has something to do with viewports? However, I'm not entirely sure on this!

Chris's user avatar

3 Answers 3

This meta tag allows you to target mobile devices and sets the width to the screen size.

Documentation provided here!

Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap

Personally I would use a library like bootstrap to acheive this adding something like this to your head.

Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:

niallhaslam's user avatar

You can use the media queries ! looks like this:

Axel Lavielle's user avatar

Your Answer

Sign up or log in, post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service , privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged html forms iframe mobile formidable or ask your own question .

Hot Network Questions

how to make html page fit mobile screen

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

DEV Community

DEV Community

Cover image for Fit Your UI to the Screen on Mobile Browsers

Posted on Jul 9, 2020

Fit Your UI to the Screen on Mobile Browsers

Fitting your UI to the screen on mobile devices gets weird sometimes. Most mobile browsers have navigation bars or applications menus that hide itself while user is scrolling down throughout the page. This causes the actual height of the window to change. What difference does it make? Let's say you want your footer to be fixed at the bottom of every page. Without a proper fix, it won't work. Here is the difference:

Alt Text

I know my drawing is bad, but I hope you got the idea. This is even more important when working with modals on mobile:

Alt Text

If you can't fit your modals to the screen, users won't see some parts of your UI. Maybe they will miss some important buttons. How to fix this? Well, it's very easy.

1. Add The Viewport Metatag

I know this is Responsive 101, but begginners tend to forget about this. So, just in case...

2. Set CSS Variable

This block should run as soon as your app starts. It will set 1% of the actual view height of the window as a CSS variable whenever the window resizes. We'll use this variable in the next and the last step.

3. Adjust Your CSS

First height property is for older browser in case if the browser doesn't support CSS variables. You can see its support table here . If you don't want your whole page to behave in this way, you can also do something like this:

In short; for individual UI elements, all you need to do is using calc(var(--vh, 1vh) * 50) instead of 50vh .

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll

Top comments (1)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

micahditto profile image

How would you do this using typescript?

This second resizeOps is taken as an identifier. Is the first one meant to be a function? I'm not used to seeing const used like this

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Visualizing Promises and Async/Await 🤓

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓

pcarrogarcia profile image

An Expense Approval System Built with Python

Patricia Carro Garcia - Mar 1

eunovo profile image

A Guide to creating TapRoot Scripts with bitcoinjs-lib

Oghenovo Usiwoma - Feb 19

yosileyid profile image

Mastering Object-Oriented Programming in JavaScript: Best Practices and Examples

Yosi Leyid - Feb 19

devsyedmohsin profile image

22 Useful CSS Tips and Tricks Every Developer Should Know

Syed Mohsin Raza - Feb 26

Once suspended, ozanbolel will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, ozanbolel will be able to comment and publish posts again.

Once unpublished, all posts by ozanbolel will become hidden and only accessible to themselves.

If ozanbolel is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Ozan Bolel.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag ozanbolel:

ozanbolel consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging ozanbolel will restore default visibility to their posts.

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Home » Editorial Calendar » Best of 2021 » Best of 2021 – How to Scale Your Website to Perform on Mobile Devices

Avatar photo

As we close out 2021, we at DevOps.com wanted to highlight the most popular articles of the year. Following is the sixth in our series of the Best of 2021.

Avatar photo

We all surf the internet mostly on our mobile devices because they are so handy and easily accessible. A vast majority of mobile device users are making online purchases and paying their utility bills using these devices. A recent study by Forrester, “ The Digital Business Imperative ,” showed that in a three-month period, 43% of the banking customers in the United States had used mobile phones for online banking transactions.

TechStrong Con 2023

The growth year over year of the volume of online business transactions via mobile devices has been significant, encouraging companies to get conscious about building websites and e-commerce sites that look, feel, function and perform identically on computers as well as smart mobile devices. However, most of the time, the experience of browsing a website on a smartphone isn’t the same as doing so on a computer. The fundamental causes of this varied behavior across different platforms should be understood to be able to develop websites that scale effectively/smoothly across different devices.

Web pages are usually composed with one or more of the following components: header and footer, main content (text), images, forms, videos and tables. Devices differ in screen dimension (length x width), screen resolution (pixel density), compute power (CPU and memory) and operating system (iOS, Android, Windows etc.). These differences contribute significantly to the overall performance and rendering of web components such as images, videos and text across different devices. Another important point to note is that most mobile users are not always connected to a high-speed network; hence, web pages should be carefully designed so that they also work effectively on low bandwidth connections.

Most Troublesome Issues with Websites on Mobile Platforms

A variety of issues that pertain to the performance and scalability of websites across devices exist, and we will now discuss a few of the important ones as outlined below:

Design Your Sites to Adapt to Different Devices

All commonly encountered issues with websites on mobile devices can be addressed through proper design that takes those issues into consideration. The most highly recommended practice is the “ mobile-first ” approach. When working with several limitations such as screen size, bandwidth, etc., the need to concentrate on the right quantity and quality of content should be of high priority. The mobile-first approach places content as the primary object and aims at producing a design for the smallest of  devices to ensure that they have only the most essential features. It addresses the design challenges for mobile devices first and then makes it easier to progressively enhance the design for other larger devices.

Here are a few best practices to consider when designing web sites that intend to scale on different devices.

how to make html page fit mobile screen

The meta viewport value as shown above helps format the entire HTML page and render the content to match any screen size.

‘Content Is King’: Web designers must remember that content should determine the design of their website and not vice versa. Websites with too many elements such as tables, forms, charts etc., become challenging when they need to scale on mobile devices. Developers end up hiding content for mobile users and as a result, the desktop version and the mobile version of the website become inconsistent. The goal of the design should be to focus on the core structure and content rather than to incorporate decorative elements on the website. As recommended by the mobile-first methodology, designers should ensure a single version of content for both desktop and mobile users. So web designers should carefully consider, craft and optimize the content so that it not only satisfies the business goals but also appeals to the mobile users. Content that doesn’t appear in the mobile version may not even need to appear in the desktop version.

Responsive images . The design should consider small, handheld devices operating in areas with low signal strength. Large photos and complex graphics are not suitable for mobile devices operating under such conditions. Designers need to make sure that the images used in websites are optimized for different sizes of viewports and pixel densities. A recommended approach is to use “ resolution switching ,” with which it is possible to instruct the browser to select and use an appropriate size image file depending on the screen size of a device. Switching the image according to the resolution is accomplished by using two attributes: srcset and sizes. With these attributes (included in the code snippet shown below), the browser will use the device width to select the most suitable media condition provided in the sizes list, choose the slot size based on that condition and load the image referenced in the srcset that closely matches the chosen slot size.

how to make html page fit mobile screen

For example, if a device with a viewport of 320px loads the page, the media condition (max-width: 320px) in the sizes list will be true and hence the corresponding 280px slot will be chosen. The first image listed in srcset (elephant-320w.jpg) has a width that is the closest to this slot Browsers that don’t support resolution switching will display the image listed in the src attribute as the default image. This approach not only picks the right image for your device viewport but also prevents loading unnecessarily large images that will consume significant bandwidth.

Responsive Tables: The world is getting highly data-driven. Bringing critical and time-sensitive data to people’s handheld devices gives a lot of power and freedom for decision-making to the end users. The challenge is to present data to the user in a fashion that is easy to load onto a mobile device and read. Most often data needs to be presented in the form of tables, but when data tables get too large and unwieldy they can be frustrating to interpret on a mobile device with a small screen. The screen could be much narrower than the width of the table forcing the user to have to zoom out just to fit the table on their screen, making the text appear extremely small. Likewise, the screen could be much wider than the width of the table, forcing users to zoom in to view the data, requiring constant vertical and horizontal scrolling. There are several approaches to building responsive tables , the most important of which will be mentioned below:

The table will not be treated like a table as the columns will be transposed to rows. Each column will be sized to be just as wide as the screen to prevent the need to scroll horizontally. By using appropriate coloring, (1 row of data) each row of data can be distinguished from another. In this case, for each “cell”, the CSS generated content (:before) should be used to apply the label so that each piece of data can be identified clearly.

how to make html page fit mobile screen

The second approach is to display the data in two forms based on screen width: 1. chart form in narrow screens and 2. complete table form in wider screens. If the mobile user wants to click the chart to see the complete table, then the approach discussed in (a) can be used to show the data in tabular form.

The third approach is to show a mini graphic in a narrow screen to indicate the presence of a table, which upon the user’s click will allow the table to be expanded and displayed.

A video that always plays: Usually video files don’t play on mobile devices if their  formats are unsupported or if they need a proprietary video player to play the content. The recommended approach is to use standard HTML5 tags for videos and animations. The video element in HTML5 can be used to load, decode and play videos on your website. Producing the video in multiple formats to suit different mobile platforms is highly recommended. It is also important to size the videos appropriately so that they play within their containers.

The example below shows the use of <video controls> in which the <source> tags let the developer specify several different types of video formats (indicated by the type element) that the browser can choose from. In this approach, the switch to the right format happens at the client-side and only one request is made to the server. This reduces network latency and lets the browser select the most appropriate video format without having to download a video first to check its format.

how to make html page fit mobile screen

The videoWidth and videoHeight properties of the video element help identify the encoded size of a video. Video dimensions can be controlled using JavaScript or CSS. The max-width: 100 percent helps to size the videos to fit the screen. CSS media queries can be used to set the size based on the viewport dimensions. There are also several JavaScript libraries and plugins that can be used to maintain the aspect ratio and size of videos.

All Things Considered…

With the exponential growth in the number of mobile users, smart phones and tablets are used regularly to surf the web and perform business transactions. Online business is turning out to be the primary business channel for several businesses worldwide. Consequently, it is important for businesses to develop websites that work and scale well on mobile devices to enhance the mobile user experience and mirror the functionality and performance of websites on desktop computers and large monitors.

The ‘mobile-first” approach helps web designers create sites that operate well on small mobile devices. Web designers need to be careful about deciding the appropriate content that satisfies business requirements, while considering the devices’ technical limitations, such as screen sizes, processor speeds, memory and operating conditions (eg. poor network signal strength). Care should be taken to ensure that pictures, videos and data that are presented on mobile devices are designed to be responsive. Designers also need to be sensitive to breakpoints, touch targets, etc.

A well-designed website that works and scales well on a small device can always be progressively enhanced to work on larger devices.

Originally published in 2018.

— Sridhar Asvathanarayanan

Make Your HTML-Website Suitable for Mobile Devices

license

Introduction: Make Your HTML-Website Suitable for Mobile Devices

Make Your HTML-Website Suitable for Mobile Devices

First I was not satisfied when I visited a desktop optimized Website on a smartphone. The fonts are too tiny, you have pan and zoom in/out all the time, the links are always hard to target. So I had to do some research how to make a website mobile suitable in relation to the display size. Responsive (Web)Design is one possible solution. The Good: -Only basic HTML/CSS knowledge is required -No additional App Programming/Installation The Bad: -You can't make (easily) a CMS created Website into a responsive site. -I haven't tried it yet, but there is a CMS OS Project with responsive functionality, take a look at: http://www.fork-cms.com/ 

Step 1: Some Illustration

Some Illustration

A responsive website behaves like a spring that fits in any size of space. You can stretch and compress it. If you change the structure, the spring itself doesn't affect on number of foldings or windings (threads). The 'information' remains the same. You don't have to write everything new. A HTML-file contains information of a website, the CSS file defines the layout structure.   That means you only have to add a new tag in an existing HTML file and extend the CSS Stylesheet.

Step 2: Tools You Need

Special software is not required. You can work with the included Windows/Linux Text Editor or use a Freeware Editior (eg. Notepad++, gedit....) For this tutorial I reused a HTML design layout provided by SelfHTML (a HTML learning Site, unfortunately only in German). http://de.selfhtml.org/layouts/nr10/index.htm So I asked and got the permission from the author, big thanks to him!

Step 3: Add One Code Line in the HTML-File

Add One Code Line in the HTML-File

At first you add a meta tag into your HTML-File between the <head></head> tags: <meta name="viewport" content="width=device-width, initial-scale=1" />  This codeline defines the default zoom for mobile devices.

Step 4: Media Query for Mobile Devices

Media Query for Mobile Devices

A media query has the structure like: <code> @media screen and (max-width: 481px){   /*write your CSS-Code here*/ } </code> '@media screen and (max-width: 481px)' defines the CSS layout for screen sizes with 481px max. (CSS Resolution) and below. For example a FullHD smartphone (portrait view) has a width of 1080 pixels, but it's not the same like the CSS-resolution. To convert the "smartphone pixels" into "CSS pixels" you have to consider the pixel ratio. A 1080p smartphone has a pixel ratio of 3 => 1080/3 = 360px (CSS-resolution) At wikipedia, there is a list of the most common mobile devices that shows the resolution + pixel ratio: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density Thanks to the testers! So we take a look at ' screen.css ' (located at .../CSS/screen.css) and add a media query with new structure definitions after the existing CSS definitions. The other css files are for older browser versions and for printing purposes.

Step 5: Use Dynamic Units to Keep the Site Responsive

Use Dynamic Units to Keep the Site Responsive

In some cases it's better to use percent units or avoid static px, inch, em...etc. Percent statements allow to keep the site flexible in relation to the screen size. In this case I've deleted/commented the static 640px width in the "#body" element. 

Step 6: Define a New CSS-Structure for the Navigation Links

Define a New CSS-Structure for the Navigation Links

To ease targeting the links I have added some margin and padding spaces between them. The borders (border: 1px solid white;) around the link-elements give the look of buttons.    You can align the navigation elements to the left, right or center, like shown in the second image.  

Step 7: Summarize All Textcolumns Into One Single Column

Summarize All Textcolumns Into One Single Column

In portrait view a smartphone has not much horizontal space. So you have to stack the columns into one column vertically.  In this example we have two textcolumns "#main" and "#subnav". If you "float" both columns to the left, the "#subnav" column stacks on the top of the "#main". I have defined the two columns with the same structure definitions, so that they have the same width, alignment and margin spaces. ~2.7% margin space seems to be visually more accurate (compare the border space on the left and right). Unfortunately I don't know where the ~0.6% have gone. Sometimes you have to estimate and experiment with the values.

Step 8: Test and Finalize Your Website

Test and Finalize Your Website

Testing is important, every (mobile) browser has a slightly different behaviour. Testing Methods: -The best way to test a responsive website is to use real mobile devices. You can go to an electronics store to check out your site with several kinds of smartphones and tablets.  -You can use an emulator to test a website,  take a look at: http://www.mobilexweb.com/emulators -Firefox/Chrome has a built-in Development-Tool, so you can check out the  look of a website in various screen-sizes, but it doesn't simulate a real mobile device. FF : start the tool by pressing Ctrl+Shift+M  and select the screen size Chrome : First you start the developer tools by pressing Ctrl+Shift+I . A cog-wheel appears right-below of the dev-screen. Click on the Cog Icon and goto the overrides tab. Select User Agent and Device Type. Sometimes CSS definitions have to be written in a seperate CSS File for a certain (mostly older) browser. My tutorial is not perfect, it doesn't probably work perfectly on some browsers. So it's your turn to improve the code. At last here is the edited html-layout of this tut attached as zip.   

Attachments

1 person made this project.

Make Your HTML-Website Suitable for Mobile Devices

Did you make this project? Share it with us!

Recommendations

A Pocket Sundial From a Broken Pocket Watch!

Game Design: Student Design Challenge

Game Design: Student Design Challenge

Make it Glow Contest

Make it Glow Contest

Make It Bridge

Make It Bridge

12 Comments

akashvijay086

2 months ago on Step 8

Please Reply Me Sir. Meta Tag Is Working But Css Link Is Not Connect Main HTML Code

I Have Problem, My Css Code Is Not Merge Main HTML Codeing

JibyM

5 years ago

Actually all you need is just this one line of code my friend and that is

<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

rumbleofdrums

Reply 11 months ago

Thank you, Jiby. That seems to have worked for me.

GL-Zee

Reply 5 years ago

PERFECT! It was just that simple! THANK YOU!!!

ValinkaK

Tried this but doesn't work with my blog which uses blogspot :(

aarondnell

2 years ago

The meta tag alone did NOT fix my site from being a clunky mess on mobile vs web browsers. HOWEVER, something ELSE did work for me: I used the CSS property max-width: 100%. I threw it on every section of my CSS page that needed refining aaaand...it worked! So if any of you are still struggling like I was, banging your heads on your keyboard, etc., and the meta tag isn't enough, try max-width: 100% and see if that helps. You might want to try one area at a time before copying and pasting down the line like I did. Hope this helps. Cheers!

PranayK17

Tip 4 years ago on Step 1

Denizenz

This doesn't work at all! :(

Kryonix

I tried this on my website http://www.animemunch.net/ and all it did was make the entire page white. Void of all content and formatting. Help? What am I doing wrong?

e10

6 years ago

Thanks a lot! This really helped me!

sphere360

8 years ago on Introduction

You are welcome!

CSS Tutorial

Css advanced, css responsive, css examples, css references, responsive web design - the viewport, what is the viewport.

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

how to make html page fit mobile screen

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference.

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.

Some additional rules to follow:

1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

Get started with your own server with Dynamic Spaces

COLOR PICKER

colorpicker

Get your certification today!

how to make html page fit mobile screen

Get certified by completing a course today!

Subscribe

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, web certificates, get certified.

Subscribe by Email

Making your website fit on any screen, the internet is more mobile than ever.

The age old problem of screen size has plighted the humble web designer for decades.Today, more people are accessing the internet by mobile phone than ever before, and the problem has only gotten worse. 2% of internet traffic comes from iOS devices , which is more than what the desktop browser, Opera creates!

So how can we tackle this problem? I mean, thats 2 out of every 100 people reading your website on their phones. Thankfully, the W3C has saw this preeminent strike of traffic from the mobile community, and given us the tools we need to make it work.

Want an example? If you’re using a modern browser, try resizing your browser window on this website. You’ll notice that it changes layout depending on the browser size (and therefore screen size). This is the effect we’re going for.

It is possible to make a website that fits on every screen without CSS3 media types, but its difficult, time consuming, and it will never look perfect on smaller, mobile screens. Our goal is to create a natural, intuitive look that is associated with mobile web browsing and app usage. After a lot of experimenting, I’ve came to the conclusion that the optimal design for mobile devices (excluding iPad) is a single column website.

First things first, if you haven’t already, make a website, just how you normally would! It can be a flexible layout or a rigid one, it doesn’t really matter. Now try resizing your browser window on your beautifully crafted piece of work. Depending on how you’ve built it, at a certain resolution you’ll get the abominable horizontal scroll bar, and no one wants to see that. The alternative is you don’t get the horizontal scroll, but eventually the content becomes so squished that you end up with almost one word per line. Our main tool to battle this is media types.

The @media Rule

Think of the @media rule as a very basic conditional statement in CSS. You can call something with @media either through a separate stylesheet, or call it directly inside your main stylesheet. If you wish to call it as a separate stylesheet, make another CSS file and include it like you’d include any other CSS file, and add the media attribute.

For this tutorial we’re going to be calling it inside the stylesheet, which in my opinion, is the better way to go about this. It’ll decrease load times on your site by reducing HTTP requests.

The iPhone resolution (and that of all mobile devices) is less than 640 pixels wide. So usually I’ll say if the screen is less than 700 pixels wide, switch to single column mode. We use this code to check for that:

Things might get a bit messy down here, but hopefully if you’ve done everything neatly you shouldnt have to add too much. For example, lets say you have two columns normally, #column_1 and #column_2 . Column 1 is the main content, and column 2 is supplementary information and adverts. Column 2 isn’t really necessary for someone just accessing the website from their phone, so you could add this inside your media declaration:

That way, column-2 wont be visible on smaller screens, leaving you with just one column, assuming that you’ve put this inside your media declaration. But wait! There’s more. You can also have a minimum width, so if you decide that when the window is on the larger size ( i.e. more than 1300 pixels wide ), you can increase the size of your content and sidebar areas. This is more suitable for rigid websites, rather than flexible columns

You could then say, what happens between the widths of 700 and 900 pixels:

These are pretty important!

iOS and Android Meta Tag

In your head you can place a meta tag which will alter how android and iOS render a web page. This is sometimes necessary for scaling on mobile devices since we use the scale property below to define what scale we want the website to be on. Generally keeping user scalable set to yes is the best idea, although on mobile apps this may not be necessary.

Here are all the @media rules, with their support. It’s pretty widely supported nowadays. Last Updated August 2013.

Related Posts

No related posts.

' src=

I do not even know how I finished up here, but I thought this post was once great. I don’t know who you’re however definitely you are going to a well-known blogger if you happen to are not already. Cheers!

' src=

Thanks for sharing, nice article. keep posting GBU

' src=

Sup, I am selling my website. Check it out http://tiny.cc/6zxnuw

' src=

The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you’re reading is “thesitewizard.com”. To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It’s just a name. It’s sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name…

My personal blog page <". http://www.caramoanpackage.com/caramoan-tour/

' src=

building websites is easy if you have access to HTML WYSIWIG editors.,

Please do inspect our own internet site <=" http://www.caramoan.ph/caramoan-sabitang-laya-island/

' src=

It is in point of fact a great and helpful piece of information. I am satisfied that you just shared this helpful info with us. Please keep us informed like this. Thanks for sharing.

' src=

I think the admin of this site is actually working hard in support of his web page, for the reason that here every stuff is quality based stuff.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Latest Tech News

' src=

' width=

Copy short link

App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

How to make Website Mobile Friendly?

By Jash Unadkat, Community Contributor - December 8, 2022

Mobile phones have become an inseparable part of our lives.  A report from Statista indicates that as of 2022, there are 6.64 billion smartphone users in the world, which will rise to 7.5 billion by 2026 . In the second quarter of 2022, mobile platforms account for 59% of overall web traffic , which is more than half of the global web traffic. Given this significant mobile usage, designers and developers must focus on delivering seamless website UX on mobile devices. Consequently, website owners must ask themselves:

This article answers these key questions by describing effective techniques for designing mobile-friendly web pages. Bear in mind that every mobile device has unique screen sizes and resolutions. A website needs to be fully responsive and cross-browser compatible to deliver optimal viewing experiences across multiple devices. This brings us to the first technique to make a website mobile-friendly.

Read More: How to perform Mobile Compatibility Testing

1. Implement a Responsive Layout

A responsive layout allows a website to rescale itself according to the device being used to view it. This makes the website adapt to different screen sizes without any rendering issues. Responsive web design works well for both mobile and desktop platforms as the website realigns its appearance accordingly.

Having a mobile responsive website boosts the SEO value of a website as Google prefers indexing and ranking websites that are mobile-friendly. Incorporating a responsive layout goes a long way in assisting websites in ranking higher on Google searches.

Need to check website mobile responsiveness?

Responsive testing to make a website mobile friendly

The responsive checker runs responsive tests on real device-browser combinations. As a result, users get accurate test insights. Thus providing an inclusive experience.

Try BrowserStack Responsive Testing

2. Optimize Website Speed

Speed plays a decisive role in creating the first impression of any website. 47% of visitors abandon a website if it takes more than 2 seconds to load whereas even a 1-second delay in page response can hurt your conversion rates by 7% .

Google considers high speed a positive ranking factor , so web developers must take all the necessary steps to increase website speed .

To evaluate a website’s loading time, run a website speed test on BrowserStack SpeedLab . Enter the URL and click on Start. This free tool verifies website speed on multiple real browser-device combinations and displays a score out of 100 for both mobile and desktop platforms.

Optimize Website Speed with BrowserStack SpeedLab

You not only get reports but also actionable insights to help make website mobile friendly.

Page Load Time BrowserStack SpeedLab

Check Your Website Speed

3. Subtle Pop-Up Implementation

It isn’t very pleasant for users to encounter sudden pop-ups while browsing web content, especially for mobile users. Sometimes, the X mark (to close the pop-up) is not even adequately visible, thus adding to the users’ annoyance. Developers and designers must ensure that if they have to display ads, they do so in a subtle manner.

Irrelevant pop-up implementation is one of the most common web design mistakes that turns your prospects into irate customers thereby lowering your chances of mobile conversions.  Few techniques for subtle pop-up implementation:

4. Incorporate Viewport Meta tag

Incorporating the Meta tag lets developers control the viewport’s width and scaling so that the website is sized correctly on all devices. The viewport meta tag instructs the browser to resize the web page width according to the device screen size it is viewed on.

Also Read: Ideal Screen Sizes for Responsive Design

Use the code snippet below to define the meta element on each web page:

5. Declutter your Web Design

Web developers must ensure they are not cluttering the website by providing every functionality on the same page. This creates confusion, making it difficult for users to navigate a page with too many elements. Offer only the critical functions upfront since those are the ones users will actively look for. For a seamless user experience, prioritize a neat, minimalist design that makes navigation intuitive.

Pro-Tip: Once done, consider running a responsive test again to verify if the decluttered website design appears to make your website mobile friendly.

6. Always Test the Website on Real Mobile Devices

An effective way of ensuring that your website delivers an optimal user experience is to test it on real mobile devices.

Testing websites across real iOS and Android devices can be challenging without access to a comprehensive test infrastructure. Now, it is not feasible for every organization to have a mobile testing lab as it involves a significant investment. Using a real device cloud is often a better alternative because it requires zero maintenance.

BrowserStack also includes mobile-specific features such as geolocation testing , push notifications, network simulation, location testing, etc.

Try Testing on Real Devices for Free

7. Update Content Carefully

While experimenting with mobile web designs and content CRO activities, the overall website can take a hit. With a mobile-first design approach taking precedence, it’s crucial to craft and update your website’s mobile content with a pinpointed approach. Make sure that the content is readable on mobile screens and well-oriented.

How to make Website Mobile Friendly?

Case Study : Learn how Basecamp optimizes UI testing workflows with  visual testing

8. Do not use Flash

Flash makes your website slower, impacting SEO and disrupting the user experience. Flash can make a page take longer to load, and sometimes it is completely incompatible with mobile devices. It is recommended to use HTML5 and CSS instead to make your website more responsive and mobile-friendly.

9. Make the website compatible with both orientations

Unlike desktops which display content in landscape mode only, mobile phones display the screen in both Landscape and Portrait orientations. Hence, you should ensure that the website loads and functions fine in both Landscape and Portrait modes with no UI distortion, glitches, or stretching. You can check it by testing the website in both modes on real devices. 

Test your Website on Real Mobile Devices

In Conclusion

Developing a website to be mobile-friendly is important but at the same time, the mobile-optimized website should sufficiently deliver a flawless user experience across any device-browser-OS combination.

Mobile devices have significantly changed how people use the internet daily. This trend is set to increase, and more people continue to access the internet primarily via mobile devices yearly. Additionally, as leading search engines like Google continuously seek to make the web a mobile-first search landscape, having a mobile-friendly website must precede developers and testers.

We're sorry to hear that. Please share your feedback so we can do better

Related articles.

Mobile First Design: What It Is and How to Implement It

Mobile First Design: What It Is and How to Implement It

Learn to incorporate the mobile first design strategy for building device-friendly apps and websites...

how to make html page fit mobile screen

How to make a WordPress Website Mobile Friendly

WordPress is a popular CMS widely used for building website and its content. Here’s a comprehensiv...

how to make a website user friendly

How to make a User-Friendly Website?

If you're wondering how to make a user-friendly website, understand six factors to improve website c...

Featured Articles

Curated for all your testing needs, thank you for subscribing.

We use cookies to enhance user experience. By continuing to browse or closing this banner, you agree to our Privacy Policy & Terms of Service .

This forum is now read-only. Please use our new forums! Go to forums

how to make html page fit mobile screen

how do you fit a webpage size to fit any screen size

ok i will like to know how do you fit your website size to fit any size because it seems that elements of my website are all around the place whenever i shrink the screen. thanks

Answer 5326c7059c4e9d92e9008b1b

well, the simple solution would be this: body { padding: 0; margin: 0; } (by defalut there is a margin of i believe 10px, so lets set it zero. now imagine i have a div inside my body: `

You can make it full screen using: div { width: 100%; height: 100%; }

this is not very efficient. since when the window is made small the page will become very small, happily we can fix that: div { width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; }

now the div can’t be smaller then 1000px (which is not good news for mobile browser, but we will get back to that later). of course you could use em, em depends on the size of the font-size. so this: div { font-size: 16px; height: 2em; } the height of the the div is now 32px, (2*16) you can make it 16px (1em) or 8px (0.5em)

You can not really answer the question you asked, it is fully dependable of how you design your webpage. but since there are scripts that can tell if you have a mobile browsers you can use px as unit. and make a page for phones as well.

The only thing i can answer is what you see with a lot of webpages: full width but probably set width min-width to prevent shifting elements like you have or they make a central wrapper (just a div) and set it like this: div { height: auto; /*if more info comes on the page, it will stretch down*/ width: 1000px; margin: 0 auto; /*this will cause the div to be in the center*/ }

hopefully this answers some of your questions. If you have any questions, just ask them and i will do my best to answer them. But when visited website, try to figure out (just by thinking about how it could be designed) how it is designed. if you have an idea, take a look in the source code (most websites allow you to view source code) don’t worry about lot’s of thing you don’t know yet, that is just because mostly large websites are maintained by lots of people, to set up your own website you can do it a lot simpler but huge websites can give you useful code you can maybe use. also take a look at http://www.w3schools.com/ great site.

how to make html page fit mobile screen

thanks a lot for your help buddy

Answer 5327611d9c4e9d7538000177

if you have any other questions, just post them here (i will reply) If you might have visited my profile you have seen i have own site, if you want to know how to set up your site, i can help you.

how to make html page fit mobile screen

@stetim your reply has been of help to me as well…But I just wanna ask what would happen if I set my div’s width to auto in the Css editor, will that cause the div to stretch in size if there’s a ‘long’ content coming in? Also do you think it’s advisable to just go all the way with a background div and differentiating it from subsequent ones with an id?

Answer 532f452a7c82caa40e0078d7

good you ask questions, if you have more questions post them, no problem. You can do auto width but this will just keep stretching and stretching and stretching (infinite stretching) so yes, you can but i recommend you set a max-width. just like you set width: auto; you can add the property max-width: 1000px; for example (you can have both property’s) you can even add a min-width. (min-height and max-height as well of course).

The second question i do not fully understand. I think it is good to make a background-div yes. i also recommend in the start of your stylesheet to start with body { margin: 0; padding:0; }

since by default a margin set of 10px (which you want to control).

you can then add div’s in your central div (which i recommend to set to 100% with a min-width).

hope this answer your questions.

Popular free courses

Learn javascript.

IMAGES

  1. Css Background Image Size To Fit Screen Bootstrap : Try to resize the browser window to see how

    how to make html page fit mobile screen

  2. image fit to screen html Code Example

    how to make html page fit mobile screen

  3. Size Web Page To Fit Screen

    how to make html page fit mobile screen

  4. How To Make Page Fit Screen On Laptop

    how to make html page fit mobile screen

  5. How to Fit Screen to Monitor Windows 10? Here’s Guide

    how to make html page fit mobile screen

  6. Automatically Correcting Image Shape With Screen Fit

    how to make html page fit mobile screen

VIDEO

  1. Mobile Responsive Menu

  2. #Snsdream 9" Android sterio fitting in Santro xing

  3. How To Fix Wallpaper Mobile Screen Zoom

  4. split background html navigation bar

  5. Full Screen Overlay Responsive Navigation

  6. How To Make A Website With Full Screen Menu Using HTML CSS

COMMENTS

  1. How Can You Adjust Your Screen Size to Fit Your Monitor?

    Changing the screen size requires different steps depending on the operating system of the user’s computer, but getting the correct resolution for a monitor is as easy as looking at the manual for the specific monitor and looking for the de...

  2. How To Clone Hackernoon HTML Page

    Website cloning is a testament to every novice web developer. A pure function-less website clone is a great way to solidify a programmer's HTML and CSS skills. However, it could be horrified at the start. In this article, I'm going to share...

  3. Three Ways Windows 8 Will Fit Your Screen

    Because Windows 8 will run on desktops, laptops, and tablets, it will support a wide variety of displays. Here's how Microsoft is tailoring the OS to fit them all. Apple’s new iPad is dominating the news with its Retina display that “takes ...

  4. How can I make an html page automatically fit mobile device screens?

    This meta tag allows you to target mobile devices and sets the width to the screen size. Documentation provided here! Also consider migrating to

  5. Fit Your UI to the Screen on Mobile Browsers

    2. Set CSS Variable ... const resizeOps = () => { document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px"); };

  6. Best of 2021

    A recommended approach is to use “resolution switching,” with which it is possible to instruct the browser to select and use an appropriate size

  7. How do I make my website fit into phone screens in HTML or CSS?

    You have to include “width=device” line at top of your HTML as in my example. So if a phone loads your page, your page reduces in size to fit the screen.

  8. Make Your HTML-Website Suitable for Mobile Devices

    '@media screen and (max-width: 481px)' defines the CSS layout for screen sizes with 481px max. (CSS Resolution) and below. For example a FullHD smartphone (

  9. Responsive Web Design Viewport

    The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0

  10. Making your Website fit on any Screen

    In your head you can place a meta tag which will alter how android and iOS render a web page. This is sometimes necessary for scaling on mobile

  11. How To Better Scale Your Website On Any Device (Using HTML)

    This is a quick and easy tutorial in HTML on how to better scale your website on any device, pc size ,and mobile screen.

  12. How to make an HTML page Mobile friendly

    Bootstrap Tutorial 04 - How to make an HTML page Mobile friendly=========================================Follow the link for next video:

  13. How to make a website mobile friendly

    1. Implement a Responsive Layout · 2. Optimize Website Speed · 3. Subtle Pop-Up Implementation · 4. Incorporate Viewport Meta tag · 5. Declutter

  14. how do you fit a webpage size to fit any screen size

    if you have a mobile browsers you can use px as unit. and make a page for phones