Solved

mobile webpage displays is bad

Posted on 2013-06-08
10
302 Views
Last Modified: 2013-06-15
I load my website on my SE arc mobile and it is AWFUL!!!!

I have used boostrap responsive as well as css/html

The font is too small, the writing is pushed over to the left and if I load the page in lanscape it loads like in tablet size screen.

http://www.mymrt.net/ctrain/home.html

I cater for 480px size and the sony Arc xperia is far bigger than that it is 480px X 854px

If you resize the browser on a PC/laptop it looks OK but on the phone, what do i do ?

If I could force it to load in 480px mode (portait) mode and then when switching to landscape mode it will work to a pointas i need to increase the font size in 480px mode
0
Comment
Question by:jagguy
  • 6
  • 4
10 Comments
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39232478
For font-size try this...
@media screen and max-width(480px){
     body{
          font-size: 15px; // or whatever you like...
      }
}

Open in new window


But the heading is a image...
You have to change the image to make it look good...

Heres the link of the image... http://www.mymrt.net/ctrain/img/head9.png
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39232479
or please specify which writing are you talking about...???
0
 

Author Comment

by:jagguy
ID: 39232682
if you look at the size of the font on the phone display it is too small under the heading.

The image isnt the problem and in fact it is the only thing that works.
There is the text/button heights too small 'fat fingers problem' the text in pushed on the left hand side and in landscape is a whopping 854px . It looks fine on a desktop browser resized.

I cant code for  every device with media queries as there is a huge range of mobile sizes. There has to be another solution.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39232927
First reduce the font size you have increased it so much...
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39232958
There is the text/button heights too small 'fat fingers problem' the text in pushed on the left hand side and in landscape is a whopping 854px .


Sorry but I have no idea which text/button are you talking about...

Please specify...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Accepted Solution

by:
jagguy earned 0 total points
ID: 39232990
Any buttons, it doesnt matter as you cant see any well.

media queries dont work or dont work well with modern smart phones as the screen sizes are huge in dimensions. Iphone5 is 1136 x 640 pixels so the idea of displaying a webpage for a phone with 480 or 320 px is long gone.

My xperia arc display for landscape was just terrible and in portrait it doesnt display like it does on a resize browser on a PC.

It isnt that east to simply increase the font size as you also need to increase the heights, and other factors. I wont be able to simply create a webpage for a screen size and assume it will display on a PC .

The solution  I have found is to create a separate website for phones only with jquery mobile.
Unless there is another easier way I think media queries will have come and gone without them really being embraced.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39232996
As you wish...
0
 

Author Comment

by:jagguy
ID: 39233610
There is another solution or better solution?

This forces a website width. Is this another way i dont know about? Can i force a website width so I always get a 480 width display?

http://www.mobilephoneemulator.com/
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39234208
Yes you can do that..

body{
    width: 480px !important;
    margin: 0 auto;
}

Open in new window

or

html{
    width: 480px !important;
    margin: 0 auto;
    padding: 0;
}

Open in new window

0
 

Author Closing Comment

by:jagguy
ID: 39249708
The solution is jquery mobile and media queries. (there is no clear answer)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

864 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now