CODEWITHSUNDEEP
iphonehtmlcsslayout
user1118019
user1118019

Reputation: 3969

how to determine size of an html element of a webpage for phone and tablet

hi my question is kind of broad and i am new to all these mobile development, but currently i am writing a webpage, for which the user will connect via their app to see the content (through webview) my question is...so when i set an image 100px by 100px,

  1. what does it mean on an iphone (smaller screen) compared to ipad (bigger screen)?
  2. does the device scale it up or down automatically?
  3. programmer like me, how do i know what is the 'best' size for the layout and element i am creating? i.e. how do i know my element is small enough to fit the iphone screen but big enough to be displayed proportionally on the ipad?
  4. how do i specify the margins...?

please help thank you

Upvotes: 0

Views: 326

Answers (2)

user1282270
user1282270

Reputation:

On the iPhone, I believe by default it assumes a viewport width of around 800px, unless you specify a viewport width in the header. So basically the page when it loads by default will zoom in or out until the page's width of 800px fills the screen. That's why, if you make a barebones "Hello world!" HTML page and load it on an iPhone, it looks super teeny-tiny—it's because it's assuming the page width is 800px since you didn't tell it otherwise. I tend to use <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> in my headers, which makes the viewport width equal the width of the device. Take that same "Hello world!" page you wrote, pop that in the header, and reload the page on the iPhone, and you'll see it looks a lot more legible. (Also, you may want to play with those scale properties on your own projects—those affect whether or not you can pinch to zoom.)

Importantly, on iPhones and iPods with Retina Displays, they'll act as though it's a non-retina display, so there's nothing additional to write to format your site for their screens. So if you put a 100x100px image on your page, iPhones and iPods will display it as 100 actual pixels by 100 actual pixels; and on retina displays it'll be the size that it would be if it were on a non-retina display, so 200 actual pixels by 200 actual pixels on a retina display. (Hopefully my math is right. It's late. :P )

On iPad, it's pretty much the same thing. 1024x768 is the screen size, so a 100x100px image on your page would take up 100 actual pixels by 100 actual pixels. And my understanding (I have yet to verify personally) is that the retina display in the new iPad works like the retina displays on the iPhone/iPod, so on those devices your 100x100px image would take up 200 actual pixels by 200 actual pixels, and because of the increased pixel density will essentially appear to be the size it would be if it were on a non-retina display. (if you use that meta tag or one similar)

I tend to make judicious use of media queries in CSS to tailor the size of everything in the layout to various screen sizes. You can even use this to serve images specifically sized for a given screen size range. This is especially useful for mobile, as you can serve a lower-resolution image to browsers with smaller viewports. (Another, somewhat controversial perk is being able to hide things in certain display sizes with the display: none CSS property.) This method is called "responsive design", and ThinkVitamin has a pretty good primer on it, with a good link list of various references at the end of the article. http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Margins are applied in CSS. Great info on them can be found on W3Schools' site: http://www.w3schools.com/css/css_margin.asp

Upvotes: 1

Tomas Smith
Tomas Smith

Reputation: 427

If you want to create responsive design, you should start creating image using percentage 

<img alt="test" src"../test.jpg" width ="100%" height="auto">

or you can determinate screen size and scale down the image using javascript.

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

Sometimes css properties like max-width/height and min-width are very useful.

Please note that every version of ipad and every iphone has got different screen size so therefore you must think more flexible with responsive designs.

Upvotes: 1

Related Questions