Solved

mobile screen sizes

Posted on 2013-05-16
4
327 Views
Last Modified: 2013-05-18
Hi,

I am confused about testing a webpage for different screen sizes. For example DW has 3 sizes to test desktop, tablet and phone size. Now for example a tablet size is 768X1024 but I checked the ipad sizes and they are not this size.

I used this but again, my display looks different on this than in my testing.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-ipad-2.php#

So what is an accurate way to cater for different sizes using media queries?
0
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39173814
Make your site according the following media queries...

/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}

Open in new window


and the rest would be your default css...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39175018
DW is not a browser, and viewing in it just give a rough idea of what things will actually look like.  the only to know what a pges is going actually look like is to view it in a real browser on the target device.

Cd&
0
 

Author Comment

by:jagguy
ID: 39176499
OK I dont use DW but I am after a simulator.

Now from the 1st post what about desktops because my laptop fits in a 980px image with room to spare.

I do like this?

@media only screen and (min-width: 960x) {}
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39176789
Yup... Thats correct too...

But aside the media queries all the css code would be the default for desktops and laptops..
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question