CODEWITHSUNDEEP
iphonehtmlcssxhtmlsafari
user1313161
user1313161

Reputation: 49

Why does my website look different on my iPhones Safari browser, am I doing something wrong?

I have finished designing a website in HTML, and reviewed the results on a Windows Computer for Google Chrome, Safari, IE 9, Firefox and Opera web browsers. When reviewing my website on an Android device (Samsung S3), the results were the same as it would look on a desktop PC/MAC, but when reviewing it on my iPhone 5, or my friends iPhone 4s, the results were different. Some of the text was enlarged while some was not. I am very confused, and I hope someone can help me out ASAP.

Look forward to your responses, and see for yourselves what I mean:

 Visit http:///www.islandtoislandshipping.com

Code HTML:

        <p id="intro">Island to Island Shipping and Removal LTD is a developing 
        organisation keen to<br />provide a high standard of service to its 
        customers. The company specialises in worldwide shipment of any household                 
        products or any goods, however, we<br />specialise directly to the Caribbean  
        (but that is not our limitation!). Island to Island Shipping and Removal LTD 
        provide an efficient, reliable and prosperous service<br />ensuring the highest  
        care is taken to in the process of delivery.</p>

        <img id="aim" src="imgs/aim.png" width="450" height="174" />

    <p>
    <br />As a company, we aim to provide our clients with all the 
    services they<br />require, from practical (shipping, removals) 
    to advise on packing materials<br />and household maintenance. 
    </p>

    <p id="stafftext">All our staffs are very friendly and courteous,<br />feel free to      
    discuss any queries you may have<br />and they will be happy to help. We are a<br   
    />dedicated team aiming to provide a stress<br />free experience for our customers.
    </p>

CSS CODE:

#intro{
position:relative;
margin-top:20px;
}

#aim{
margin-top:20px;
}

#stafftext {
position:relative;
margin-left:190px;
margin-top:90px;
 }

.staffimg {
margin-top:-100px;
}

#link1 {
position:relative;
margin-left:130px;
bottom:130px;
text-align:center;
font-size:9px;
 }

Upvotes: 1

Views: 7712

Answers (2)

Boaz Shoob
Boaz Shoob

Reputation: 11

iPhone browser doesn't like split margin or padding css styling. Try using the joined margin/padding way.

Instead of writing:

margin-top: 90px;
margin-left: 190px;

Try:

margin: 90px 0 0 190px;

That's margin: top right bottom left;

Upvotes: 1

boz
boz

Reputation: 4908

I would try and add -webkit-text-size-adjust: 100% to the body in your css. It will disable text resizing on iOS devices.

https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
http://blog.55minutes.com/2012/04/iphone-text-resizing/

Upvotes: 2

Related Questions