I am trying to translate a site theme so it looks similar on a mobile device. The only devices I have to test on right now are iOS devices: an iPhone and a Gen 3 iPod Touch. The iPhone is higher resolution (Retina).
When I visit a site I'm working on ( http://diynamic.net/dev/jetcityairtours ), the theme renders the page width across only half the iDevice's total screen width, but with some elements floating out the way they do on the Chrome browser on PC. The whole site would be great if I could get the background div and the menus to render full width on the page - it'd be perfect!
I have the wordpress mobile
My questions are:
Why is the theme getting mangled?
Is there a "view-source" option for iOS Safari?
Is there another trouble-shooting solution for developing themes for iOS in particular, mobile in general?
and:
Do other people see this same effect on non-iOS devices (maybe not the right place to ask this last question).
I have a horribly ugly mobile theme in place via Wordpress Mobile Pack - just default. If you're interested in testing on mobile, please go to the non-mobile theme, link at the bottom.
I am aware of screen emulator plug-ins in Chrome and Firefox, but I am not aware of user-agent spoofing / emulating on a desktop platform.
I'm not sure if I should be posting only one question per "Question", so apologies if this is not appropriately segregated.
What you need is to use a viewport meta tag (see below for reference). More specifically, in your case, it sounds like you could solve your problem by including something like this in your head section:
<head>
...
<meta name = "viewport" content = "maximum-scale = 1.0">
...
</head>
The viewport meta tags, while created by Apple, also work with Android browsers.
For reference:
General explanation, info & examples here
Related
I've posted this question on the support site for my Wordpress theme but haven't had any luck over there yet.
When I resize my browser window to 360px (360 because thats what my viewport width is on my Samsung Galaxy S6) I see something totally different than when I try to access my site on my phone.
My site is www.andrewpennell.com
What I've designed and am supposed to see is in the picture below.
Correct Design
But that's now what I see on mobile.
When I load my page on my mobile device I see several issues:
a) The background image doesn't seem to scale down - this may just be a simple media query I need to add.
b) My Logo, Name, and Subtitle are no where in sight (although I've seen them randomly load up under the menu bar where I can barely see a sliver of them.
c) At the bottom, social buttons and sharing go behind the footer
My primary concern at the time is problem B.
Any helpful comments are welcome.
Thanks in advance.
Check the source code for the page (right click => view source)
Do a browser find (ctrl-f) for viewport
If you don't see a meta tag something like this:
<meta name="viewport" content="width=device-width" />
then you're going to experience issues with small high res screens like the one on an S6.
My website is showing fine responsive behavior when i change the width of my browser window. I also checked it under different view port widths on this studio press responsive testing tool it appears to be working fine. However, when some of my clients checked it on different phones particularly Galaxy S3, they see desktop version of the site, instead of mobile one.
Can somebody please point out what am i missing.
You need a viewport meta tag to tell the device at what scale it should show your website:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I have a web application for PC screen browsers (#media screen{}) and I want to make it friendly for smartphone screens.
Unfortunately my 12pt fonts and my 128x128 pictures appear very small in my smartphone with a 1280x800 resolution (Samsung-Google Nexus).
Before make additions to CSS for a smartphone like mine, what I must have in mind to create a web application for a variety of smartphone screen resolutions?
Can you try to add this in css :
<meta name="viewport" content="width=device-width, user-scalable=false;">
from : https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Viewport_meta_tag
History about viewport, i'm not sure....
There are many approaches to create a responsive website- Responsive, Designed for mobile, and Mobile first. However, nowadays, we consider more about Mobile First!. So, there are many websites teaching you how to create a responsive websites and mobile first approach for example:
Firstwebdesigner
WebdesignTuts
The first thing to think of when building a responsive site is simplicity. Web designers love to show off that they can design the hell out of a website. They fall in love with their code and all the cool things that it can do.
10 Basic tips about responsive design
Keep your layout simple
Use media queries
Define the break points
Make your layout flexible
Make your picture behave
Don't foget make and min
Make most things relative
When mobile linearize
Skip the none essential content
Check your meta viewport
You can see more information on Dan Rowinski's article. This is a great article to answer your question, what you must think before creating a responsive web application.
I'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program
I am currently working on the mobile version of my website. I use the NivoSlider throughout the site and unfortunately it doesn't seem to scale for mobile devices. I have a mobile specific section of my stylesheet and have tried using "width: 50%" and "max-width: 480px." They seem to shrink the area of the slider, but not the actual images themselves. Any thoughts or additional help would be great. The site is currently in the staging environment at http://www.staging.andrewpautler.com.
Sitepoint has a get article on that here