0

Hello im implementign a web application and my problem is the design. The application is running as a website.For now what i found is media queries and i use them to display the site to laptops 1920x1080 , mobile 480x720 and tablets 768x1024.

What i do is to change the zoom and display the site in different resolutions like below

@media only screen and (min-width: 768px) and (max-width : 1024px) and (orientation:landscape) {body{zoom:35%;}}

Is there an other way to do this ? any api to use? or Javascript? want to do something simple because right now to implement the css for mobile and tablet resolutions i did 2,3 day testing on those devices.So i want something that will make my site responsive wihtout needing to have the device i want to chek this.I want it to work everywhere.

Thanks in advance.

Tetsujin no Oni
  • 7,300
  • 2
  • 29
  • 46
Antreas Apostolou
  • 315
  • 2
  • 9
  • 17

1 Answers1

0

Take a look at Foundations and Twitter bootstrap. These are real-time responsive CSS libraries which automatically reposition and resize elements on the page based on the size of the screen. You can see this by visiting those links and re-sizing your browser window. This is a great way to go if it works for your project because the page handles itself without you having to write different styles for every screen size. Take a look at this page to see how they work.

Also take a look at modernizr. What it does is detect what kind of device you are using to view the page and what features it supports, and then it adds classes that indicate what features it supports to the page's body tag which you can then write css styles for. For example, you could write something like this if the user was viewing your site on a touch screen device.

.touch .your-class {

}

It can be used to detect screen size as well: https://stackoverflow.com/a/16482237/1727920

Community
  • 1
  • 1
Jordan
  • 574
  • 1
  • 5
  • 15