I am working on a website built-up using bootstrap 4. Website design is working perfect on all platform but on mobile devices the website gets auto-zoom. i need to zoom-out manually in mobile devices to see the website properly. I have tried media port commands, initial scale to 1. Still not getting a solution. Please help
Related
I have a webpage with svg background and form. The background is divided to 2 sections.
Top area - background image / bottom area - background color
Had an issue with some mobile devices, the bottom background comes up behind trees like this.
I have fixed that issue by writing media queries. After that I checked major devices responsive compatibility by chrome device emulator. All are fine. But my client complained me that he was getting that background issue on his device.(microsoft surface pro 4) Then I got back to chrome device emulator and added custom device as a surface pro 4 and set actual resolution.(2736x1824) But it's showing fine on chrome tool. (pc) This is my settings.
I'm getting this error because of not setting up device pixel ratio? or any other way to check mobile compatibility correctly?
There are lot of ad-dons available for testing responsive website on respective devices I used following add on you can try this addons
Responsive Web Design Tester - chrome
toggle Responsive - Mozilla
Just search for this addons and click on the add addons button on respective browser search for respective addons .
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Has anyone managed to get a website using lightbox working offline using GoodReader or any other offline method?
I've built a fairly simple website with images/videos using gallery with thumbnails and lightbox to view images full size. Works fine on my PC. When I transfer the files to the iPad, I can't get the images to come up full size. The pop-up just shows a spinner.
iPad running latest version, 9.2.1
GoodReader App, see http://www.goodreader.com/
Any suggestions on what could be the issue? Or a better way to view my Gallery/Video website from a thumbnail to full size, offline, on an iPad.
The purpose of the website is to demo videos/image when we have no internet.
Any help would be greatly appreciated.
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..
I have just done a website for destop, and now I am trying to make it possible for the website to work in mobile devices. I am using Media Queries. But I have a problem. I want to have some element special for my mobile wensite, and not to display these elements in the desktop website. When I use display: none for those elements in the part of css file for desktop website , then the elements disapper from mymobile website to...
Can anyone help me please. I have spends hours on these and nothing...