Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements.
However, encountered an issue where when viewed on actual mobile devices with a mobile user agent string, the elements and fonts appear larger than intended, causing content to overflow beyond the screen width. This resulted in an error flagged by Google search console due to horizontal scrolling being enabled.
When switching the smartphone's browser to request the desktop version of the site, the display appears as expected because it sends a desktop user agent string.
Attempted to resolve this issue by implementing a reset css by copying webkit's user agent stylesheet used in Chrome desktop, hoping to override the mobile user agent stylesheet without success.
The challenge lies in continuously testing while developing as debugging on localhost is not feasible for mobile issues. As a workaround, publishing the problematic html/css to a live domain allows for real-time testing on a smartphone, although debugging becomes more challenging without the element inspector available in Chrome desktop.
This presents a significant obstacle in identifying and resolving the issue effectively.
Seeking advice on best practices for developing/debugging/testing Bootstrap pages on actual mobile devices, and ensuring consistency between the mobile and desktop versions of the site.
Update:
Created test files accessible via smartphone and displaying container div's width on the page. Discovered that the smartphone displays at 330px wide, contrary to the assumption of native resolution at 1080px. Using the dev console's device emulator at the same width unveiled the identical issue, providing a more user-friendly debugging experience.