Solved

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

Posted on 2013-10-28
19
498 Views
Last Modified: 2014-10-23
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
0
Comment
Question by:matiascx
  • 4
  • 4
  • 3
  • +4
19 Comments
 
LVL 10

Accepted Solution

by:
Owen Rubin earned 125 total points
Comment Utility
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.)
0
 
LVL 11

Expert Comment

by:Guru Ji
Comment Utility
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
0
 

Assisted Solution

by:FutureIOSGuru
FutureIOSGuru earned 125 total points
Comment Utility
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)
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 125 total points
Comment Utility
>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.

https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

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.
0
 

Author Comment

by:matiascx
Comment Utility
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?

Thanks!
0
 

Author Comment

by:matiascx
Comment Utility
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
0
 
LVL 18

Expert Comment

by:Richard Daneke
Comment Utility
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.
0
 

Author Comment

by:matiascx
Comment Utility
How to determine web browser is mobile or pc?
I will change the dev team if i know what should do then.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 18

Expert Comment

by:Richard Daneke
Comment Utility
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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.
0
 
LVL 10

Expert Comment

by:Owen Rubin
Comment Utility
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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.

Cd&
0
 

Author Comment

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


Best Regards,
robert
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
It seems to work fine on my android when I pinch.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 125 total points
Comment Utility
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.

Cd&
0
 
LVL 10

Expert Comment

by:Owen Rubin
Comment Utility
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.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When Apple released Swift last year, the aim was to introduce a new programming language for Cocoa and Cocoa Touch that was fast, easy and effective, like the name connotes. Apple succeeded. Swift is designed to couple with Objective-C program…
The release of the iPhone 6 and the iPhone 6 Plus was extremely successful for Apple. However when iOS 8.1 was introduced, many iPhone users complained of quick battery drainage. Without even knowing, you may be unnecessarily using up your battery p…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.

743 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

16 Experts available now in Live!

Get 1:1 Help Now