what is the difference between mobile website and normal pc website?

Dear sir,
we have one website working well for the PC to access.
Unfortunately, the web page can not be displayed well by iPhone.
What is the different between the web page for pc and for mobile smart phone technically?

Thanks for any information
Who is Participating?
Owen RubinConnect With a Mentor PrincipalCommented:
As simple as it sounds actually.

A mobile website is one optimized to be viewed on smaller screen mobile devices. Typically, the mobile design will eliminate wide pages, and represent the page in a longer, less wide format.

A Standard "PC" website is typically optimized for a larger screen as you would find on a desktop or laptop computer, say 1024x768 or larger.

Many modern web design tools, like WordPress and Joomla (and their themes) often contain both a mobile theme and a standard theme, and will detect the device and re-layout the page for the proper screen size.

At a minimum, if you do not support a mobile screen directly, your screen should properly resize when resized so that a mobile device user can at least scroll about the screen and see everything. Not optimal however.

Also note that iOS devices to not run Flash, so some mobile website designs will eliminate Flash so that it runs on iOS devices.

So the question back is how was this website created? (what tools, etc.)
Guru JiCommented:
Mobile browsers are essentially scaled-down versions of standard HTML web browsers viewed on a computer. If you do opening a website which contains or run using Adobe Flash, it won't work on any apple mobile devices because Apple mobile devices don't support Flash.

Rest if its just a static HTML website, it can be viewed in any mobile browser.

Hope that helps
FutureIOSGuruConnect With a Mentor Commented:
The difference is in how the content is formatted.  Most mobile-optimized sites are simply styled differently via CSS (http://www.w3.org/Style/CSS/learning).  Where you would have a CSS file that will display the site on a larger screen type for "PC" viewing, and the smaller device display will use the "mobile" style sheet. (http://www.w3.org/standards/webdesign/mobilweb.html)
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
>web page can not be displayed well by iPhone.

What does this mean?  Is the page too wide and you have to scroll?  What you want to today is a responsive site.  This means the pieces can resize and move around as the screen size (viewport) changes from desktop, to ipad to phone.


There are some projects you can use as a base so you don't have to reinvent the wheel.  I use http://getbootstrap.com/ more and there is also http://foundation.zurb.com/.  Both have a grid, responsive css and media queries and other js/jquery options.    They are not meant to be a ready to go template, but rather a base of options you would use from site to site.

Making a responsive site does take more thought and planning as on a full screen you may plan to have 3 columns where an ipad/tablet you may have 2 columns and one stacked and 3 stacked on the phone.  In some cases, a full size image needs to be larger on a phone.  They key is you plan for all of this on one page.  It can be confusing for people starting out.
matiascxAuthor Commented:
Thanks a lot for your information.
My mobile website seems does not support resize feature.
That site is developed by other guys.
I want my site can resize by iphone brower. How to do that?
What is more, is there any difference between the mobile brower and pc browser?
Are the html standard totally supported by mobile browers?

matiascxAuthor Commented:
The page does not look well means:
It can not be resized, the page fonts always looks big on the mobile iphone. We must scroll down a lot to see the full page.
I'd like one page who can be resized by iphone two fingle drag to zoom in/out .
Is that the so called responsive site?

Best Regards/robert
Richard DanekeTrainerCommented:
Each browser has some peculiar behavior.  Better web developers test on the browser requesting the page and adjust their code for the browser.

Screen size is the major difference.  A test on screen size in the web page can redirect the html to a different set of html files for the mobile screens.

If you do not have control over your web page development because it is handled by another firm, you have to let them code the changes for mobile devices.  Or, change developers.
matiascxAuthor Commented:
How to determine web browser is mobile or pc?
I will change the dev team if i know what should do then.
Richard DanekeTrainerCommented:
One of the web sites I work with uses this test in the <HEAD> to redirect:
if (screen.width <= 699) {
document.location = "http://your domain name here.com/mobile";

Open in new window

Some people test to see if the requestor is using iOS (Apple device) and more.   Internet searches can show several different examples.   This is a simple test for web pages where the width is less than 700.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If the site was done a few years ago, chances are it was not made using "responsive" media queries although it has actually been around for some time.  

Most (new) sites now are made to be responsive.  There are probably 40%+ using some form of "mobile" if you include tablets.   It may not be the team, but the process.  If you have a large site with a large userbase, you may want to consider a native app as well.
Owen RubinPrincipalCommented:
If this site was built by others, you will either have to hire them again to fix it, or learn how to add the proper formatting yourself.

If the site is not resizing properly now, there are many reasons, most of which have to do with absolute size styles being used in the design.

If you post a link to your site, we can look at the source and see as well.
We can spend days speculating about this, or you can post a link to the page and then experts will be able to give you specific advice.  

Without seeing the page it is like asking an auto mechanic why your car won't start over the phone.  You might get lucky, but results are generally better with a hands on approach.

matiascxAuthor Commented:
my website is : www.guozhiyin.com 
I 'd like to the web page should be resized by two finger dragging.

Best Regards,
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It seems to work fine on my android when I pinch.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The validator shows some issues http://validator.w3.org/check?uri=http%3A%2F%2Fwww.guozhiyin.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

COBOLdinosaur can probably answer this better, but I believe the first error will is typically ignored or you can send it in your htaccess.  
Line 4, Column 65: Bad value X-UA-Compatible for attribute http-equiv on element meta.
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

You also have duplicate id's. You can have duplicate classes, but only one unique id.

Go through your errors and if you you are not sure how to fix, then post a new question.
COBOLdinosaurConnect With a Mentor Commented:
The meta tag is non-standard but it is an acceptable hack for keeping IE 8 out of quirksmode.

The structural errors may or may not be contributing grief, but they need to be cleanup up in any case.

The page is so over scripted that it is impossible to tell how anything is going to react cross-device without doing a detailed tour of the DOM.  I'm not even sure if media queries will save it.

I see two red flags that tell me it is never going to be maintainable cross device.  there are style sheets down in the body, and there is inline styling using !important.  Even in a styleheet most Experts consider !important to be last chance desperation and a hack.  I cannot think of any case where it should be necessary inline unless the scripting has shredded the markup to the point that it is impossible to determine what is being applied to given elements.

Your best option here is to do separate pages for mobile devices.  Do them tp standard and get rid of all the unnecessary scripting.  After you have that working you need to re-visit the pc version to rationalize it and get rid of all the scripting that cannot be justified. The way it looks right now a directory of script libraries was just dumped in in case some of it might be needed.

Owen RubinPrincipalCommented:
So looking at the site we are back to my original comment of what you expect from a mobile device. This page is readable on a mobile device, you just have to scroll around a lot. This was not a mobile optimized page, but it can, for the most part, be read on a mobile device.

I agree with COBOL, given the dynamic nature of this site, I would have a separate  design for mobile and PC.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.