I have created a website from a tutorial online. It works great on a computer.
But When I use it on a mobile device, it doesn't scale up correct. I have used the correct meta tags, but still it doesn't work.
when I minimize my browser on my PC this is how it looks:
But when I visit the website through my mobile phone, the design changes to the 'mobile version' but everything looks to small in comparison with minimized browser version. This is how it looks on the phone:
As you see, the logo scales correctly, but the rest of the content doesn't.
Any idea on how to fix this?
If you guys want my source code, just ask it and I will upload it online.
Thanks
Here is how it looks normally: https://i.stack.imgur.com/VrCWG.png.
Here is the source: https://drive.google.com/open?id=0B8POOYHtz9ifdTdWU0JZOG54ZVk
sorry for multiple answers, I can't post more then 2 link in the same answers.
Related
I am working on a webpage and it works fine on Safari on iPhone. However, when the page is opened in WeChat (opened by clicking a link in chat), it has some problems.
Because the problems only exist in WeChat, I was wondering is there a way to simulate the WeChat so that I can debug it?
Otherwise I can only make some changes in code, then deploy, then view it in WeChat, which is very inefficient.
Based on comment, I provide the actual problem here:
I'm using Slick in my page. In WeChat, when I swipe slides, there is obvious lagging.
Thank you!
You can use wxdebugeer tool provided by wechat for debugging.
Link : Wechat tool
Whatever the problem related to webpage development for wechat can be tested using this.
I´m planning to make a full dynamic site using pjax, with static menu (only the content will be updated with pjax). How bad is this?
The site that i have planned to implat this on have a lots of data on it, most images.
I have tested my solution on my local machine and it seems to work but in production it will probably be slow or what do you guys think? Are this bad practise?
Now on pjax start i slide out my container to the left, and slide in the new content from the right. I have noticed a small performance lost when i do this in Safari and FireFox. Should i skip my solution and just do regular updates of the page? I want to do something like Twitters iPhone app, but on the web.
The reason i want to do this are that i have a full size google maps with a lot of pins that take some time to load.
I have found Tubrolinks (http://www.github.com/rails/turbolinks) that would be included in Rails 4.0, its great adn i think a good answer to my question.
I'm working on a project for class. To create a website and a website for mobile users. The site is to recongize the type of device/browser accessing the page and send the appropiate form. So if I was to visit the site on IE8 it will direct me to the mainpage for IE8, if I was to access the site with a mobile device it will direct me to the mobile website main page automatically.
Also, I need to design the website for at least two different screen sizes.
I'm coding in HTML5, I do not know the type of server the site will be hosted on. The use of Javascript is extra credited. The project details are to "design a small mobile web site. The web site should be tested on one or more mobile devices. The iPod Touch device will be used as the base for testing."
I know how to do 8/10 of the requirements (except the two mentioned). I looked at W3C and didn't find anything.
Any help would be much appreciated. Thank you!
Do a Google for:
CSS Browser Detection
JavaScript Browser Detection
Also you should think twice about creating multiple sites - with basically the same content - or creating proper stylesheets that are referred from the same site.
Hope that get's you the other 2 requirements
NOTE: Since this is homework I won't post any links...
I suspect that ServerFault isn't the best place for this question...but aside from that, your question is a little vague. A google search for "designing a mobile website" turns up what looks to be several pages of relevant information. If you first try working with the information in those documents and then come back with specific questions (e.g., "I tried this and it behaved this way instead of the way I expected") you're apt to get better answers.
I am looking for something that will help me learn how to set up my site so that when people go to it there is the regular version and the mobile version. Problem I am having is that most of the sites I see on google are pay sites that help you set that up. Can I just make two versions of my site and load them both on my hosting? Also how does it know when to load the mobile versus the regular? These are the types of things I am looking to learn, any suggestions of places to start?
Please please please make sure you do the following:
Only do a mobile version if it adds value.
If a user requests a deep link from a mobile device, don't redirect to the mobile home page
Allow the user to choose to view the full version
Make sure tablets such as the iPad uses the full version by default
Don't serve WML to the hi-res smartphones such as the iPhone
If your full sized website is unusable on a phone, consider tweaking it to be more suitable (don't print content text too wide).
Modern iPhones and iPads are perfectly capable of handling most full sized websites, there is little need for a mobile version unless it actually improves the user experience. I hate to get redirected to a baby interface that doesn't provide the information I need.
Good examples of mobile versions include:
Google website
Gmail website
Mediocre examples include:
Any blogpress site
Bad examples include
anything that uses WML
Here's Apple's advice on providing mobile versions to the iPad:
Note that the Safari on iPad user
agent string contains the word
"Mobile", but does not contain the
word "iPhone". If you are currently
serving mobile content to any browser
that self-identifies as "Mobile", you
should modify your user agent string
checks to look for iPad and avoid
sending it the wrong version of your
site. The version numbers in this
string are subject to change over time
as new versions of Safari on iPad
become available, so any code that
checks the user agent string should
not rely on version numbers.
Something to look into would be the #mobile css media type, which is used to load a different styles when loading in a mobile device. I am not sure which devices support it, but I imagine it would be most of the popular models. As far as your suggestion, you can certainly host two separate sites, but I would defiantly go through Alex's suggestions before you go through the trouble.
http://www.w3.org/TR/css-mobile/
Alex had some good suggestions, but if you really want to serve up a specific version based on mobile or non-mobile you can take a look at the http header. In some cases the User Agent will give it away, but not always. Check out this link for details: http://detectmobilebrowsers.mobi/
hey guys,
weird question - i have no idea how to describe what i want i in the title of this question.
i wonder how i can measure or query how much megabytes or kilobytes my browser has to download to view my front-page of my website.
i'm trying to optimize my website for mobile devices and so i wonder how much bytes a mobile browser has to download to view my website. images, js-files, css-files, etc. all in all -> is there a nice and simple way to measure that?
thank you for your help
regards matt
You can use web-browser developer tool.
For Chrome, tools are embedded in the browser:
http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial
For Firefox you can use the Firebug plugin:
http://getfirebug.com/network