I have a simple webpage here.
If I want to convert it into mobile website, what should to my html or something such that when I open it with my mobile, I should be able to see the whole page in my screen.
I tried adding this to my html code... in head
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Mobile specs : Any web browsing supporting mobile and am targetting a width of 320px. No Horizontal scrolling allowed. Only vertical scrolling.
Can you help me fix this bug? Just the code for converting to mobile website. I tried a few solutions online but didn't seem to work out.
Thanks! :D
I would start with taking that meta tag off... it seems to be messing with the user's ability to zoom in and out of the page, which is bad usability.
I would say, if you're going for a site optimized for mobile, you're going to have to rethink how you're using CSS. Instead of declaring widths in pixels, use percentages. Mobile device widths change between landscape and portrait mode, but 80% is always 80%.
This article will walk you through how to start setting up different styles for different device widths: http://www.alistapart.com/articles/responsive-web-design/
Related
I see there is a lot of info on how to save a websites to an image with PHP, however I cannot find any information on how to take a screen shot of a website using a specific width.
I want to take a screen shot using PHP of my websites in different widths, so I have screen shots of the design in different responsive modes (Desktop, Tablets, Phones).
Does anyone know how to save a url to an image with a specific width set, using PHP? (or with help from Javascript/jQuery for all I care)
Since every one is so smart on Stackoverflow and just down votes for a question that has not been answered on Stackoverflow ever! Here is my solution to a perfectly valid question.
PHP cannot set the width of the website when taking a screen shot (using cUrl or copy), however using iFrame, you can create an iFrame, set the width of the iFrame and take a screen shot of that page.
I have a project made in Wordpress.
I have posts which I share in social networks.
In twitter there is no problem, because I create tweets without image.
Facebook allows me to select the image of the page from the link I'm going to share.
But Google+ is picking up a random image, and does not allow me to select the image.
I've investigated in Google, and seems to work using something like this in the page which Im going to share:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
But it doesn't work.
Although Google+ sometimes supports the og:image property, it doesn't always.
Using a schema.org microdata "snippet" is the preferred way to do this for Google Search and Google+. See https://developers.google.com/+/web/snippet/ for more details and links to a testing tool which can tell you how your page is being read.
Additionally, for both og and snippet data, the image selected needs to be large enough and square enough. The height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.
We created a PHP web page that is loading, zooming in and out just fine on Android and Windows Phone default browsers. But when we tested the page in iPhone, the pinch zoom does not work for some reason.
The page does a "require_once" for the menu. Both the page and the menu have the following viewport meta tag:
meta name="viewport" content="width=945, initial-scale=0.5, maximum-scale=10.0, minimum-scale=0.25,user-scalable=yes;"
Wonder if anything needs to change in the viewport itself or there is something else I should look into.
Thank you.
I am getting into creating mobile device friendly websites and apps.
I am using bootstrap and HTML5 so I am fine with rearranging my layouts.
My question is, is what is the best way to resize images depending on what device the website is being viewed on?
Should I make multiple versions of main images such as the website logo, i.e. a version for Iphone, Ipad and desktop computers? Or have one image where the height and width change?
I currently have a PHP class that detects what browser the user is using by checking the header e.g. the Ipad safari browser has "ipad" in the user-agent header.
I know this isn't 100% reliable and can be spoofed. I'd say 95% of the time it's going to be accurate, because users who are genuinely interested in using your site aren't going to try to break it for lolz.
I would probably just use the width and height approach. Most of my mobile implementations have been very light on graphics, so it hasn't been an issue. You should also look into the viewport meta tag if you haven't done so already.
How to set viewport meta for iPhone that handles rotation properly?
Using Viewport to create a mobile friendly version
If you are asking how to send different sized images to different devices (based on the window width) adaptive images is one good option. It will test the visitors viewpoint then send an appropriately sized image based on break points you specify.
Good luck!
I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.
I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.
What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.
Any suggestions?
What about doing it with javascript. Your page can load with no ad unit html code at first but it could detect screen size with javascript and then add to the page the appropriate ad units for the initial browser size. Only a desktop type browser can resize the viewport window so maybe just forget about that issue. People resizing the browser viewport probably are playing around or whatever and will still see the first AD impression. Think about it, you open a browser and then you resize the window because of not being able to see properly and even then how many times are you going to be doing it as you navigate a site from page to page, maybe once (the first time). Google doesn't want you mucking up AD impressions so I don't think this violates TOS to load the ads based on window size. Just don't destroy the ads after resize and load others (risky). Mobile devices can't resize viewport (other then rotate) and they will always see the correct AD size.
Ryan Underdown provides a simple solution at http://ryanunderdown.com/ppc/responsive-ads-with-adsense.php
Another SO question: Making Adsense Responsive
Even Google's CSE will not show ads on your site if the initial viewport size is too small for the ads and even after you resize the window larger it won't reload ads in it until browser is refreshed.
Use a responsive AdSense unit.
If this is not what you want, use JavaScript to detect the available width then select the appropriate ad unit, then inject it to your content.
1st - I did AB test of 728 leaderboard vs 336 large rectangle. 336 performed over 75% better, over 300,000 page views.
Point is - don't use 728, and also don't recommend using responsive ad unit at all.
My other test improved earning by over 100% by switching from responsive ad unit to 2 fixed size rectangles (one for mobile, one for desktop/tablet).
You can use something like this to determine user agent:
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
Then based on user agent you can show either "mobile" or "desktop" ad size.
Here is how to use USER_AGENT to select which ad to show: http://www.adsenseninja.com/show-mobile-optimized-adsense-ads-for-smartphone-visitors-automatically-free-mobile-ads-php-script-for-wordpress/
It is possible via hidden div and media libraries but I think It's forbidden by google :(