How detect smartphone screen and show webpage - javascript

I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks

Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.

Related

Android browser rendering half width of html text

I have already disabled the CSS, deleted half of the HTML code, it looks like it is a bug with the Android browser. I'm using Android 4.2.2, built-in browser.
How it should render:
Text 1234567891011
How it is actually rendering:
Text 1234
567891011
I have double checked the page code and the CSS, disabled Javascript and CSS, and still get the same results. I'm not sure if it is a browser issue or a code issue.
Page to check: http://lucrebem.com.br/blog/emp/66-o-que-vender
Screenshots, as requested:
So far I have found this:
Those images are from a tutorial using Android 4.1.2, which means those older versions of Android have that issue with auto-fitting the pages. Isn't there a way to configure the code itself to fit the page, instead of having to change Android settings?
Solved.
Had to insert this in the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What it does is controlling the viewport layout in mobile, this way the page can fit to screen without having to change Android settings.
As stated here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Force hide address bar in Chrome on Android

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers

Image Loading on Mobile CSS/HTML

I have been editing a web page, some CSS/HTML (didn't start to code from the beginning just edit)
My website works with all browsers right now, the problem is half of the images does not upload on mobile. I have put a screenshot.
Here is my code http://jsfiddle.net/2gj9b2ub/
I've been reding these media queries but it seems I have to re-write the all CSS for that? The site is not a mess just image uploading problem so maybe I can fix with something else.
Thanks for the help.
So I found a solution after few research,
I just entered this one line of code <meta name="viewport" content="width=device-width, initial-scale=0.33, maximum-scale=1" /> into head section, adjusted scale and it worked. It doesn't work as good as like bootstrap or a code for designed for mobile, but it fixed.
Thanks for help.

Facebook Open Graph isn't loading image

I've put together a micro site that lets users decorate a tree to be shared on facebook/twitter/etc...
http://jajo.net/odditree/share.php?file=u/1418759317.png
Some php magic creates and uploads their image, then sets a variable to be retrieved on the last page.
$file = $_GET["file"];
$url = "http://www.jajo.net/odditree/" . $file;
Everything is working fine except for the Facebook share dialog.
At first, I tried using a URL to share the image:
<a class="btn fb" href="" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[url]=<?echo $url?>&p[images][0]=<?echo $url?>&p[title]=Jajo - Holiday Odditree=', 'newwindow', 'width=600, height=250'); return false;"><span class="icon"><i class="icon-facebook"></i></span> Share on Facebook</a>
Sometimes this would load the description, sometimes the image. Never both.
After struggling to make this work I conceded to Facebook's will and created an App.
After following the dev documentation I put this together:
<a style="cursor:pointer;" onclick="window.open('https://www.facebook.com/sharer/sharer.php?app_id=823686387676926&u=http%3A%2F%2Fwww.jajo.net%2Fodditree&display=popup&ref=plugin' , 'newwindow', 'width=600, height=250'); return flase;">Facebook Again</a>
The site now relies on Facebook for the heavy lifting and all I need to do is provide open graph data.
Here's what that looks like:
<meta property="og:title" content="Jajo Holiday Odditree">
<meta property="og:site_name" content="Jajo Holiday Odditree">
<meta property="og:url" content="http://www.jajo.net/odditree/">
<meta property="og:description" content="<?if ($url) {?>Behold my #Jajo Holiday #Odditree! Share your own Odditree creation. http://jajo.net/odditree<?}else{?>Create your own Odditree. http://jajo.net/odditree<?}?>">
<meta property="og:image" content="<?php echo $params['image']; ?>">
<meta property="fb:app_id" content="823686387676926">
<meta property="og:type" content="website">
As far as I can tell, everything is where it needs to be, It even echos the data correctly when I view-source. Yet the share button only shows this:
The logo image it's pulling there goes away when it's shared and on my timeline it's just a blank box. Instead of the open graph image:
I've debugged and scrapped several times, but my og:image always comes up empty.
https://developers.facebook.com/tools/debug/og/object/
I'm at a loss here.
If anyone can help me troubleshoot this issue, I'd really appreciate it.
===UPDATES===
After involving several people, having a lengthy chat, and pulling hair out... We were unable to make this work in time for the site to launch. So we dropped the facebook stuff and it became a twitter campaign.
After all was said and done, my best guess was that it had to do with image sizes.
I've had issues before where no matter what I do it gives options on the image to use with left/right arrows. Reading a couple things on the web. One suggests the use of image_src tag in the page head.
<link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >
But that seems like the old way, not the open graph way. Saw something else that sounds more promising though, clearing FB's cache.
To force Facebook to refresh it’s cache so that your changes are reflected on Facebook, you must force your page to be “scraped.” The page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter.
from this article:
http://www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/
Be curious what happens were you to add a second og:image.
Sorry you didn't make it in time.
I just had my own frustrating time, and my solution could have been yours. I'll post it here for any who follow along behind us. Facebook OG:Image not displaying. Agh!!! I can't believe how much time I wasted last night and today on this. It was maddening! I followed every rabbit trail, and Facebook continued to ignore my og:image property (I even removed the url redirect for ssl in my web.config and re-coded the site so that I could have an unsecure and a secure version of the image). Everything looked right to me, but it kept ignoring the property.
Then...
I went here:
https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0
This is the tool you want to use, not this one:
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com
The explorer gives you detailed error messages that the sharing debug tool does not, in my case specifically:
I had spaces in my image filename that weren't url encoded. Have a space in your filename and it will browse just fine, but it will be rejected by Facebook for the property on the sharing debugger page without any error message (not sure why they call it a debugger, the explorer is the real debugger). (If I can save even just one person from this, then my misery was worth it).
Oh ya... the link for the explorer is at the very bottom of the "debugger" page (titled Scrape Via API).

How to switch to desktop view on mobile when you are using Zurb Foundation 4?

I am developed a website using responsive framework Zurb Foundation 4 a little ago.
Now my client requested to put a button which says "Switch to Desktop Version" and when it is clicked by visitor the site should behave like non-responsive or desktop version should do on a mobile.
I tried to find something similar in foundation 4 but did not succeed some solutions are just to remove media queries using javascript. Please remember Foundation 4 uses Mobile First... Can anyone please suggest some thing?
As a starting point you can manipulate the viewport meta-tag with js.
Originally it is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add an id for easier reference and change the contents of the attribute content to something like width=1280:
document.getElementById("myViewportTag").setAttribute('content', 'width=1280, inital-scale=1.0')
Note: This only works on the current page and gets lost with the next page-load. But you could use cookies to preserve the preferences of a user and set the viewport on every page-load when the cookie is present.

Categories