How to make my html website fit into an iPhone or iPod?

I'm still making my fansite (this is a draft, I'm gonna get the real domain later) and so far, it looks fine on my laptop and iPad, but when I checked on my iPhone, it had a whole different look and the margins and tables weren't right. My draft website for now is http://the-shields.freefansitehosting.com. I've tried to fix the coding without getting rid of the margins but nothing would work. Please leave a code below, thank you. BTW I'm beginning and I just learned HTML to make a fansite, no hate because I only just turned 12 haha thanks again.

Switch from tables to CSS style sheets if you can. Tables aren't flexible enough to be viewed by different screen sizes. CSS isn't hard to figure out so you'll have some fun with it. However, I wouldn't spend a lot of time specifically designing for iPhones. It can be quirky and difficult. Start with getting your regular page set up just the way you want, and worry about creating a page for iPhones later.

Use media queries. You can see the example on my blog: http://pyzonet.blogspot.com

Just open it on your phone or test it on responsive site test

This is called "Responsive Layout" which means the template will fit for Laptop, Desktop, iPhone, iPad and Mobile versions using single css (might be CSS3). Go through this article. This may lead you…

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

  • HTML Video Player for Cell Phones / Iphones I'm trying to set up a QR Code that when scans will be taken to my HTML website with a full screen video auto playing, but I don't want to use youtube or vimeo because of the water mark. Where would I get the code to make this happen? Also what HTML5 video player will do this? It has to be full screen not a video player on the page.
  • How to make my website fit all screen sizes? I was wondering how do I make my website fit all screen sizes, such as Iphone, Tablets, Laptops and desktops. I created my website on desktop, when I view it on tablet or iphone the images and texts are overlapping each other. How do I fix that?
  • How to make my HTML email signature responsive on mobile devices/operating systems? I've created a HTML rich email signature on PC, I test sent to my macbook, iPhone & iPad it showed the images are skewed and the text is more spaced out with some hidden/missing text also! Yet shows fine on PC? I don't know a thing on writing code yet i understand it may resolve my issue, Your help would be HUGELY appreciated.So… How do i make my HTML email signature responsive on mobile devices and different types of operating systems?
  • How to make an iPhone app, based on html/javascript? I want to make an application with html/javascript, for the iPhone. However, I'm not looking to get it on the app store. I want it to be dowloadable from a website, kind of like OpenAppMkt. They would visit the page, then click add to home screen (shortcut), then it will be the app. Does anyone know how to do this?

Add Comment