www.michaelpeyron.com/wp
That's a demo of a site i'm working on. Whenever I visit it in browser and I reduce the window to smartphone size all images are there. But when I use my iphone 6 and visit the site, the images of instagram, twitter and facebook just isn't there.
I've zero clues about what the reason can be behind this behavior.
The twitter, facebook and instagram images are all from: https://fortawesome.github.io/Font-Awesome/cheatsheet/
Related
I am using dom-to-image library so whenever a user click on a button I want to download that section as an image. It is working fine on desktop. But, in mobile the image is downloading like a responsive mobile design. On mobile view it should download the image like it shows in the desktop view.
I tried changing the viewport to 1500px once the user click the button then download the image as a desktop version and once done revert back to mobile responsive design but I dont want it like that.
I have some issues with my website image preview when I share my website as private message on Facebook (in messenger not Facebook post). In my html homepage I use og:image and I tested with two different image (obviously not in the same time) size 200x200 and 600x315 (I also try by specify the width and height with og:image:width and og:image:height but nothing change).
When I share the website link (with 200x200 image) on facebook messenger (as private message in chat to a friend) I obtain on desktop a preview (in the small chat on bottom or directly in messenger) with my website description on the right and my website image not cropped on the left and this is correct due to using an image small than 600x315. On messenger mobile instead I see the image cropped on top and the description on bottom and this bad.
Then I try, as recommend by facebook, to use an image 600x315 and in this case the result got worse because on desktop I see in the small chat the website description on the right and the image cropped on the left and If I open messenger I see a large image not cropped on top and the description on bottom. On messenger mobile instead I see the image cropped on top and the description on bottom.
i know this is not a question about source code, however i need to find the solution. So, This is my site.
After i finished making the site, I resized my browser window, the responsive css worked perfectly. However, when I tryied to see my site from my mobile phone the only thing I could was the top bar..
Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
So, here is what i am planning to do but i feel it very strange.
I will create a website like a normal website mydomain.com, but the button and text on that website is very big.
Ex:
Css
.myNormalMobileFont{
font-size: 500%;
}
.myNormalLargeFont{
font-size: 700%;
}
The below image shows that no matter where I open my website either in mobile device or in desktop, then it will look like this
One more thing, when I opened some article page in my mobile I saw they have a mobile web version, but I have never found these mobile version on the normal Desktop browser?
Where they put their mobile web?
My mobile website can be used as a normal Desktop website but the the buttons and Text will be very big.
Can someone explain this?
You actually don't need to specify the font-size like that as long as you set the correct meta tags.
ex:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
This sets the scale of the viewport.
I suggest you upload your HTMLs to a server and access them from your phone and play around with it there. it's the best way to learn
As for your question regarding where you can find the mobile web, it depends on the site.
1) Sometimes the site is responsive (you can access the site from desktop , resize your browser down and watch it change) ie: https://www.foxtel.com.au/got/login.html
2) But sometimes they have dedicated mobile site, like facebook -> https://m.facebook.com/
I have a website. It's not responsive now. Normally we can check any responsive website by reduced the browser size if the are made by css3 media query. But I want to make a responsive view for my website. when user will visit the site by their PC, they can see the PC version. if they reduce the browser size, they will not be able to see the Mobile view. They will be able to see the mobile view if they only visit by there Mobile.
for example:
http://www.whatsapp.com
http://www.facebook.com
With php-mobile-detect you can detect a users browser and redirect a mobile to m.whatsapp.com for example. Is this what you are looking for?
Example:
require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
if($detect->isMobile() || ($detect->isTablet()){
// Redirect to the mobile version instead of the desktop version
header('Location: m.yoursite.com');
}